vue 动态引入图片地址

Posted 2020-11-26 mengfangui

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