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的編譯。