vue 打包后背景图片无法显示

假如我们在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>

完美解决


版权声明:本文为goxingman原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。