vue打包中background-image图片路径问题

按照以往在css文件中写background:url('图片路径')，完成后加载竟然显示出错，起初以为路径不对，检查了几遍，仍然没有问题。最后百度找答案，发现不少同行都遇到过这种问题，遂记录下自己所采用的解决方式：

data () {return {img: require('你的图片路径')}
}

div的写法：

<div :style="{backgroundImage: 'url(' + img + ')'}">
</div>

更简便的写法：

<div :style="{backgroundImage:`url(${img})`}">
</div>

原文链接：https://www.cnblogs.com/anns/p/8565033.html

vue打包中background-image图片路径问题相关推荐

electron结合vue打包后 tray托盘图片路径
1 相信很多小伙子用vue.config.js 配合electron打包的时候托盘一直出不来而已应用直接不运行其实是打包后找不到图片路径了一下截图出来参考在这里插入图片描述区分下开发环境 ...
vue 直接访问静态图片_vue中本地静态图片路径写法
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧这里写图片描述需求:如何components里面的index.vue怎样能把assets里面的 ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
Vue-在data中引入静态图片路径
在data中引入静态图片路径首先tempate中内容都一样: <template slot="pic" slot-scope="{ row }"> ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
小程序富文本标签中文字及图片路径的提取入坑~填坑
关于从后台请求回来的富文本标签中文字及图片路径的提取. 以下是以我项目为例,希望能对遇到同样问题的小伙伴有所帮助!!
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
vue系列---项目打包找不到图片路径
在测试环节发现有图片找不到,发现是图片路径没有写对. 报错如下: 原代码: <img src="/src/assets/img/arrow.png" alt="&q ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...

vue打包中background-image图片路径问题

vue打包中background-image图片路径问题相关推荐

最新文章

热门文章