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}"/>`

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM