Vue打包後圖片路徑問題解析

1.vue 背景圖片引發的問題

在使用vue_cli時背景圖片出現路徑問題

需要在build文件夾的utils.js裡添加 publicPath:’../../’就可以了

修改前

Vue打包後圖片路徑問題解析

修改後

Vue打包後圖片路徑問題解析

其中如果在行內樣式中寫了背景圖片,這種方法是不可行的。

2.vue 在data裡面引入圖片引發的問題

在data中正常引入圖片是這樣的:

export default {

data () {

return {

src: './../static/img.png'

}

}

}

但是這種引入路徑是無效,因為webpack是按字符號打包的,不會做任何處理。所以需要import在外部引入或者require內部引入

import avatar from './../static/img.png'

export default {

data () {

return {

src: avatar

}

}

}

//或者

export default {

data () {

return {

src: require("./../static/img.png")

}

}

}


分享到:


相關文章: