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的编译。