vue.js动态修改background-image问题
更新时间：2022年08月25日 09:34:07 作者：Weber_t
这篇文章主要介绍了vue.js动态修改background-image问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue.js动态修改background-image
网上搜罗了一圈都没找到vue.js动态修改background-image的相关代码，找到的都是eslint写法的。eslint的写法在js中用不了，直接报错。最后自己试下了下结果可以了。
这个是eslint写法
<div class="content-wapper" :style="{backgroundImage:'url('+seller.avatar+')'}">这个是js写法，嘿嘿，其实很简单，主要是es和js编码规则不一样。加个转义后的单引号就行了
<div class="content-wapper" :style="{backgroundImage:'url(\''+seller.avatar+'\')'}">vue中background-image问题
今天在设置文本框的背景图片的时候，遇到一个问题，就是路径正确，但是无法正常显示图片。如果这个路径写在了css里面，也可以正常显示，但是写到HTML里面，无法正常显示。
如上图所示，上面的是我写在模板里的，是该图片实际存储的地址，无法正常显示。下面的是写在将红框内的地址写到css后的结果，可以看到地址已经变了，应该是编译后的地址。
解决方案
图片地址不需要改变，只需要使用require对图片进行导入即可。
<input :style="{ 'backgroundImage':'url('+ urlIcon +')' }"/>
this.icon = 'background.jpg'
// 直接required 直接使用 this.icon 引用 '../../assets/background.jpg'路径会报错
this.urlIcon = require('../../assets/'+this.icon)
即可正常显示。
小结
- 动态引入背景图片需要使用require关键字
- require内不能使用纯变量，可以使用将字符串类型的变量改为拼接字符串
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下2018-03-03
这篇文章主要给大家介绍了关于在vue上使用cesium开发三维地图的详细过程,Cesium是一个强大的JavaScript库,支持三维地理信息展示,并提供了丰富的地理空间数据可视化功能,需要的朋友可以参考下2023-12-12
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli），具有一定的参考价值，有需要的可以了解下2017-08-08
这篇文章主要介绍了vue项目配置使用flow类型检查的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下2022-11-11
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了VueJS页面渲染之后如何调用函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论