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")

}

}

}


分享到:


相關文章: