webpack下css/js/html引用圖片的正確方式

在webpack的處理下，爲了使引用的圖片被打包編譯（以把src的圖片文件編譯到dist中或者對src的文件進行base64編碼），應使用以下引用方式：

1. 在html/ejs等中引用圖片：

藉助require和es6語法引入

<img src="${require('../../../../static_guojiang_tv/src/mobile/img/recharge/bg.png')}">

 

2. 在css/vue組件中引用圖片：

照常按照相對路徑引用

css:
background: url(../../img/backpack/all.png);

vue組件：
<img class="round_bg" src='../../img/store/img_4.png'>

 

3. 在js中引用圖片：

須要藉助require才能被webpack識別並打包圖片資源

let img = require('../../img/loveday/4.png');
let img_html = `<img src="${img}"/>`