鍍金池/ 問答/HTML/ 用webpack打包vue項(xiàng)目,圖片路徑錯誤。

用webpack打包vue項(xiàng)目,圖片路徑錯誤。

我使用background屬性,設(shè)置一個(gè)div的背景為一張圖片,這個(gè)圖片和這個(gè)vue組件在同一個(gè)文件夾下,assetsPublicPath也從 “/” 改成了“./” ,在同一個(gè)組件中,直接使用img src的方式導(dǎo)入的圖片打包后,沒有問題,但是使用background的div圖片路徑錯誤,用f12打開觀察了一下,這個(gè)背景圖片和img圖片的區(qū)別在于img的圖片前有“./”,而背景圖的圖片沒有。
圖片html代碼為:
<img src="./header.jpg">

背景圖的div的css為:

    background: url('./bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
回答
編輯回答
青黛色

webpack打包vue項(xiàng)目,會把css部分提取到單獨(dú)的css文件中,這樣造成了圖片路徑引用錯誤,一般這種資源都是放在static目錄下,然后引用('/static/...')

2018年9月22日 20:20
編輯回答
真難過

找到你的utils.js文件,找到use: loaders這句話所在的配置,加入這句話:publicPath:'../',vue的loader對靜態(tài)資源的路徑是需要配置的。注意publicPath里面寫的路徑不是你圖片完整的路徑,比如../../static/里面的img,你只需要寫'../../'。so try it~

2017年6月26日 18:57