vue中动态更新backgroundImage的url属性

最新推荐文章于 2024-02-21 16:32:01 发布
最新推荐文章于 2024-02-21 16:32:01 发布
阅读量790 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63498341/article/details/132670495
版权 
  <div id="bg-overlay" class="bg-img" :style="{backgroundImage :'url('+back1+')'}">
  </div>
data: {
        back1:'路径'
},

注意事项

背景图片的url参数里面不能有反斜杠，需要使用replace(/\\/g,'/')将路径中的反斜杠跟换成正斜杠
李博的前端篇
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 内联样式style中的background用法说明
10-14
<div :style="{ backgroundImage: 'url(\'' + item.img + '\')' }"> ``` 在这个例子中，`item.img`是包含图片URL的数据，通过`+`运算符将其与字符串`url(`和`)`拼接起来，形成有效的CSS `background-image`属性值。...
关于在Vue中实现动态背景组件
12-22
<div :style="{ backgroundImage: `url(${background})` }" class="dynamic-background"> export default { props: { background: String // 接受父组件传递的背景图片URL } }; .dynamic-background { ...
Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)
qq_36048145的博客
02-04 2682
在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题
vue的style绑定background-image url 写法 简单易懂
IT13333的博客
06-29 3807
vue的style绑定background-image url 写法
【未完美解决】vue引入图片相对路径的问题（img、background-image:url()）
程序边界
04-23 6249
文章目录一、问题二、解决1.引入2.使用(1)template中(2)script中(3)style中 一、问题 我们在组件中引入图片的方式一般常用两种： img标签引入，图片路径写到src属性中； 其他标签引入，图片路径写到style属性：background-image:url()中，或是 静态路径 放到css中; 二、解决 1.引入 一般来说，通过require('图片相对路径')可以解决绝大部分问题： 引入图片变量： import bgImg from '../assets/img.png
vue的style绑定background-image url 写法
腾讯全栈-ITCJF
09-05 1万+
.login-container { background: url(‘~@/assets/login_images/login_background.png’);
Vue中background-image需要用到data中的数据时URL怎么写
qq_31706077的博客
10-25 1401
html <div :style="{'background-image':'url('+imgURL+')'}"></div> data里 data(){ return{ imgURL:require('图片的uil地址') } }
Vue动态实现评分效果
08-30
今天，我们将介绍如何使用Vue动态实现评分效果，这是一个非常实用的功能，广泛应用于各种评分系统中。 首先，让我们了解一下什么是评分效果。评分效果是指用户对某件事情的评估和打分，通常用星星表示，例如五星...
前端vue-cli项目中使用img图片和background背景图的几种方法
10-16
`require`函数用于在JavaScript中动态加载模块，也可以用于获取图片资源的URL。与`import`类似，它返回的是一个模块的URL，可以用于`img`标签的`src`属性或CSS的`background-image`。 示例代码： ```javascript ...
背景图片动态绑定
qq_43483403的博客
12-03 290
:style="{ backgroundImage: 'url(' + staticUrl + '/manage/bank/icon_otherside/' + item.icon + ')', backgroundPosition: '106% 40px', backgroundRepeat: 'no-repeat', backgroundSize: '80px 80px', }"
vue项目中加入图片和背景图：img、background-image
最新发布
m0_72822997的博客
02-21 3526
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042。/*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
vue3动态background-image
weixin_70243424的博客
07-22 2431
【代码】vue3动态background-image。
Vue中一个动态添加background-image
寬真
10-23 1万+
Vue中一个动态添加background-image,一开始不知道该怎么弄，后面查了下，应该这样使用 &lt;div @click="dialogVisible = true" :style=" {backgroundImage:'url('+personalData.avatar+')'}"&gt; &lt;div&...
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
vue动态修改url上的参数
weixin_39031037的博客
08-10 1814
用新值覆盖之前的数据就OK了，这样页面刷新url上面的值一直保持最新的。
VUE style中设置background-image时的路径问题
qq_40137978的博客
10-14 1272
VUE 在style中设置background-image时路径问题 之前用的都是require方法 //常见并且常用的方式 <script> data(){ return{ list:[ {url:require('../1.jpg')} {url:require('../2.jpg')} ] } } </script> 而我想直接在style上写，不想费劲的去在数据层写了 实际上require这个函数是可以直接在style里面加的与上同理
Vue项目中background-image属性设置方法
热门推荐
彭世瑜的博客
04-07 2万+
vue项目中background-image属性设置方法 方式一：直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item-icon { width: 20px; height: 20px; background-size: 20px 20px; vertical-align: middle; /* 放置
vue项目使用background-image设置背景图报错的解决
bbt953的博客
02-17 5507
background-image: url("@/assets/images/loginbg.png"); // 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法: background-image: url("~@/assets/images/loginbg.png"); // 带~的路径会被webpack解析为require(src/assets/images/loginbg.png) ...
如何动态改变background-image
fighting ~的博客
08-02 1952
最近在开发uni-app小程序时尝试使用栅格布局利用循环遍历元素节点，其中每个元素节点对应的背景图片都不相同，于是就遇到了需要动态改变元素background-image的操作。
vue 中 动态修改 background: url 路径
06-12
在 Vue 中，可以使用动态绑定的方式来修改 `background` 样式中的 `url` 路径。具体操作步骤如下： 1. 在模板中，使用 `v-bind` 或简写的 `:` 绑定 `style` 属性，并指定需要修改的 `background` 样式，例如： ```html <div :style="{ backgroundImage: 'url(' + imgUrl + ')' }"></div> ``` 其中，`imgUrl` 是一个 Vue 实例中的数据属性，用于存储图片的路径。 2. 在 Vue 实例中，定义 `imgUrl` 数据属性，并在需要修改路径时，更新该属性的值，例如： ```javascript export default { data() { return { imgUrl: 'path/to/default/image.png' } }, methods: { changeImgUrl() { this.imgUrl = 'path/to/new/image.png' } } } ``` 在上述代码中，`changeImgUrl` 方法可以在某些条件触发时被调用，从而更新 `imgUrl` 属性的值，进而动态修改 `background` 样式中的 `url` 路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值