假如我们在vue中像这样在style中设置background,正常命令行运行vue项目,可以正常显示背景图片,但是一旦打包后,就无法正常访问了
.inp {
background: url('../assets/from.png') 0 3px no-repeat;
}
查看控制台报错发现,这个url居然去请求后台了,那样是肯定找不到图片了
解决方法:
1、在data中定义如下:
export default {
name: 'productdetailspage',
data() {
return {
note: {
backgroundImage: "url(" + require("../../assets/save.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "25px auto",
marginTop: "5px",
},
}
},
2、通过行内样式将样式引入
<div class="inp" :style ="note"></div>
完美解决