Vue动态绑定背景图（url（+‘’+））

最新推荐文章于 2023-09-15 17:39:13 发布
最新推荐文章于 2023-09-15 17:39:13 发布
阅读量2k 收藏 4
点赞数
分类专栏： web前端开发 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168YY/article/details/128192994
版权

vue动态绑定背景图片

backgroundImage

<div :style="{backgroundImage:'url('+bg+')'}"></div> //bg是参数，背景图地址

backgroundImage && 三目运算符

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

注意：

  • 首先要动态绑定style，就必须把属性从“-”写法改为驼峰写法，比如属性背景图片本来的写法：background-image，必须改为驼峰写法：backgroundImage；

陌一一
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 动态绑定背景图片的方法
12-29
vue动态绑定背景图片的方法，具体介绍如下所示： 1.backgroundImage && 三目运算符 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + coverImgUrl + ')', backgroundS
CSS——css style中background-image背景图片动态绑定
最新发布
qq_43201350的博客
02-28 392
CSS——css style中background-image背景图片动态绑定
css 图片路径
cxy666的专栏
12-08 2321
1、不要给背景图片路径加引号将background:url("xxx.gif")改为background:url(xxx.gif)因为对于部分浏览器加引号反而会引起错误。 2、背景图片的路径是相对与当前css页面的路径。例如：有如下目录结构|--images   |--xxx.gif|--css   |--xx.css|--index.html代码内容index.html引用xx.cs
vue 动态绑定背景图片
c327127960的博客
02-09 1299
vue 动态绑定背景图片
css 鼠标悬停之后的图片放大、文字上拉动态效果
lcl_key的博客
07-14 1639
效果图： 用到的CSS知识点 transition css过渡 transform 转换 linear-gradient 线性渐变 当进入父元素之后触发子元素的hover,可以这样写: 父类:hover 子类{} .all:hover .imag{} /* 标题 */ .title { margin: 0; font-size: 24px; color: #000; line-height: 33px; font-weight: 400; } /* 主体 */ .all
Vue 中动态绑定背景图片（三种情况）
MrQiu的博客
01-13 2万+
1.服务端返回图片链接 <div class="bg-img" :style="{ backgroundImage: `url(${imgUrl})` }" /> <div 2.引用本地的图片 <div class="bg-img" :style="{ backgroundImage: `url(${imgUrl})` }" /> <div imgUrl: require('../assets/bg-img.png'), 一定要以require的方
vue中动态绑定行内样式style的backgroundImage
lu2925028830的博客
04-18 2578
vue中动态绑定行内样式之backgroundImage
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
热门推荐
lingliu0824的博客
07-25 2万+
（以下情况是通过style设置内联样式时发生的问题，在外部css文件和style标签里面定义的样式不会出现以下问题） 我们可能会通过以下这种方式来设置元素的背景（注意元素需设置宽高，或者元素里有内容支撑） 使用vue-cli创建项目后，使用以下三种方式设置背景样式时，第一种方式无法生效，后面两种方式OK， 使用第一种方式时，无论这里用@/assets/logo.png，~@/assets/logo.png，…/assets/logo.png作为背景图片路径都无法成功，这里确定，图片路径是没有问题的 我
Vue动态绑定class、 style、background的写法
m0_50669730的博客
03-04 1883
一、动态绑定class。二、动态绑定style。三、动态绑定background背景图。
:style在列表中动态配置背景图片
qq_25983579的博客
09-15 1112
:style在列表中动态配置背景图片
vue动态改变背景图片demo分享
12-12
如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>...background: url(img/piao11.jpg) center no-repeat;...background-image: url(img
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
background 背景样式
yaningyin的博客
03-22 292
1.background-image 背景图片 background-image: url('./images/2.jpg'); 2.background-color 背景颜色 background-color: cyan; 3.background-origin 设定背景图片的起始覆盖点 border-box 从边框区开始绘制背景图片 pa...
:style=““给div动态绑定背景图
晚风的博客
10-21 1375
getdata.left.bgurl是背景图片地址 <div class="content" :style="{backgroundImage: 'url(' + getdata.left.bgurl + ')', 'background-repeat': 'no-repeat', 'background-size': '100% 100%',}"> <p class="c.
uni-app 动态绑定style background-image uniapp 动态绑定背景图片
代码是贝多芬的音符
05-10 4117
正常不绑定的时候 <view class="site" v-for="(item,index) in fieldData" :key="item.id" style="background-image: url(../../../static/img/l3.jpg);"> 绑定的时候 <view class="site" v-for="(item,index) in fieldData" :key="item.id" :style="{backgro..
VUE 动态绑定背景图片（:style）需要用require包裹
weixin_55182699的博客
11-26 4457
vue 动态绑定图片路径
vue动态添加背景图
maocilang的博客
02-06 9402
vue动态添加背景图
vue动态style设置背景图片
范天缘的博客
05-09 1万+
vue项目中，这里需要动态style设置背景图片 <div :style="{'background': data.avatar == ''? 'url(' + defaultImg + ')' :'url(' + data.avatar + ')', 'background-repeat':'no-repeat', 'background-size':'100%' }" ></div> ...
vue动态绑定背景图片
11-14
在Vue中，可以使用v-bind:style指令来动态绑定背景图片。具体方法如下： 1.使用data属性来存储背景图片的路径： ```javascript data() { return { bgImg: 'path/to/image.jpg' } } ``` 2.在模板中使用v-bind:style指令来绑定背景图片： ```html <div v-bind:style="{ backgroundImage: 'url(' + bgImg + ')' }"></div> ``` 或者使用简写方式： ```html <div :style="{ backgroundImage: 'url(' + bgImg + ')' }"></div> ``` 这样就可以将背景图片动态绑定到指定的元素上了。 如果需要给v-for循环的标签添加背景图片，可以在循环中使用上述方法，并将背景图片路径存储在对应的数据中。 补充：如果在使用v-bind绑定img的src时出现[src="[object Module]"]的问题，可能是因为使用了ES6的import语法导入图片，可以改为使用require语法导入图片，例如： ```javascript data() { return { imgSrc: require('@/assets/image.jpg') } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值