vue 动态引入图片地址

1、相对路径引入（src下的assets文件夹）

当你在 JavaScript、CSS 或 ​​*.vue​​ 文件中使用相对路径 (必须以 ​​.​​ 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 ​​<img src="...">​​、​​background: url(...)​​ 和 CSS ​​@import​​ 的资源 URL 都会被解析为一个模块依赖。

例如，​​url(./image.png)​​ 会被翻译为 ​​require('./image.png')​​，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

 

所以请使用require引入图片地址：

<div
        class="service layout"
        :style="{ backgroundImage: 'url(' + bjPic + ')' }"
        id="anchor3"
    >
</div>

data() {
        return {
            bjPic: require("../assets/chan-bj.jpg")
        };
    },

 

2、static文件夹引入图片

若从static文件夹引入，不需要使用require，因为static文件夹的文件不会经过file-loader的编译。