vue.js动态修改background-image

最新推荐文章于 2023-03-04 09:19:43 发布
最新推荐文章于 2023-03-04 09:19:43 发布
阅读量6.3k 收藏 5
点赞数 6
分类专栏： Vue 文章标签： vue.js background-image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weirtang/article/details/89483299
版权

网上搜罗了一圈都没找到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+'\')'}">
Weber_t
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 改变背景(backgroundImage)和 类名称(class)
09-10
js 改变背景(backgroundImage)和 类名称(class)
Vue项目中设置背景图片方法
01-21
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url(../../assets/head.jpg); 这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题： 1、在data中定义如下： export default { name: 'productdetailspage', data() { return { note: { backgroundImage: url( +
VUE框架使用JS动态绑定背景图片
cheer
08-10 1040
VUE框架使用JS动态绑定背景图片 前言 以下讲述如何使用vue框架动态绑定一个html标签的背景图片，两种情况：url链接、项目资源。 文章目录VUE框架使用JS动态绑定背景图片前言一、动态绑定url链接1.1 代码1.2 知识点二、动态绑定项目资源2.1 代码2.2 知识点总结 一、动态绑定url链接 1.1 代码 document.getElementById("元素id").style.backgroundImage = 'url(' + url链接 + ')'; 1.2 知识点 通过ge
vue绑定background,Vue.js数据绑定风格backgroundImage不起作用
weixin_36200896的博客
12-28 175
I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }".The documentation say...
Vue项目中图片路径反斜杠问题
Jim Suen
11-27 4089
问题描述 打开接手的一个项目中发现背景图不显示，F12后发现路径被解析成了 css background: url(/abc\imgs\background.jpg) no-repeat center; 手动在浏览器中把反斜杠改为斜杠图片正常显示 css background: url(/abc/imgs/background.jpg) no-repeat center; 查看代码，代码中...
vue3利用JS切换背景图
IU
08-24 1305
Vue3使用JS控制切换图片、菜单、tab专用。
Vue.js高效前端开发(用户动态评价)
最新发布
03-29
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点，在Web开发领域中受到广泛欢迎。Vue.js的核心理念是通过声明式的数据绑定和组件化来简化用户界面的构建，使开发者能够更加专注于业务逻辑...
background-remove:这是一个来自图像 URL 的简单背景去除应用程序
05-30
本文将深入探讨一个名为"background-remove"的简单背景去除应用程序，它利用JavaScript这一广泛使用的编程语言，为用户提供了一个便捷的解决方案。 “background-remove”是一个基于JavaScript的轻量级应用，其核心...
vuelazybackgroundimages一个简单的Vue组件用于延迟加载背景组件
08-10
"vue-lazy-background-images" 是一个专门为Vue.js设计的组件，旨在解决网页性能问题，特别是处理大量背景图片时。这个组件实现了延迟加载（lazy loading）技术，有助于减少页面的初始加载时间，提高用户体验。 ...
v-lazy-img-Tiny（<0.6kb）指令，用于Vue 2的渐进式图像加载。-Vue.js开发
05-27
Vue渐进图像延迟加载图像，同时显示预览。 极小，经过压缩和压缩后不到半千字节。 用法v-lazy-img在显示预览时添加Vue渐进图像延迟加载图像。...后者更改背景图像（css background-image）而不是src属性。 用法示例
vue.js多种登录方式tab切换代码
06-09
Vue.js是一种轻量级的前端JavaScript框架，以其易学易用和组件化开发的优势深受开发者喜爱。在这个"vue.js多种登录方式tab切换代码"项目中，我们主要关注的是如何使用Vue.js来实现用户界面的动态交互，特别是切换...
Vue动态绑定class、 style、background的写法
m0_50669730的博客
03-04 1957
一、动态绑定class。二、动态绑定style。三、动态绑定background背景图。
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
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 路径
weixin_30412013的博客
07-16 2453
1. 你一定发现，直接在class与style里面设置背景图片无效。如果你么发现，请看这篇博文https://www.cnblogs.com/tengyuxin/p/11192800.html 2. 下面重点说，vue中动态加载background-image data(){ // 这是要用的数据 production: [ { product...
vue踩坑系列——backgroundImage路径问题
热门推荐
MoLvSHan的博客
10-11 2万+
在前端开发中，background-image属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在vue-cli项目中，如果如下面代码填写路径会找不到图片 import TemplateNav from './TemplateNav' export default { name: 'FooterNav', components: { 'TemplateNav': T
Vue项目中使用img图片和background背景图的使用方法
总结前端开发中遇到的问题，分享前端知识
09-11 1万+
Vue项目中使用img图片和background背景图的使用
vue中style使用background-image方式
love464524131的专栏
12-07 6454
vue style background-image url
vue项目background-image引入背景图报错
归小超博客
12-29 2719
之前写好的代码明明运行很正常，今天早上突然在预发环境挂掉了 [31mERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false,"root":"C://Program Files (x86)//Jenkins//workspace//
Vue3动态绑定background-image
10-17
可以使用Vue3的动态绑定语法来实现background-image的动态绑定。具体实现方法如下： 1. 在Vue3组件中，使用v-bind指令来绑定background-image的值，例如： ```html <div :style="{ backgroundImage: `url(${imageUrl})` }"></div> ``` 其中，`imageUrl`是一个变量，它的值可以在Vue3组件中动态改变。 2. 在Vue3组件的data选项中定义`imageUrl`变量，并在需要的时候修改它的值，例如： ```javascript export default { data() { return { imageUrl: 'https://example.com/image.jpg' } }, methods: { changeImageUrl() { this.imageUrl = 'https://example.com/another-image.jpg' } } } ``` 这样，当调用`changeImageUrl`方法时，`imageUrl`变量的值就会改变，从而实现了background-image的动态绑定。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值