Vue2.x background:url()踩坑

最新推荐文章于 2025-03-14 13:15:12 发布
最新推荐文章于 2025-03-14 13:15:12 发布
阅读量1w 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq1123642601/article/details/97115189
本文探讨了Vue项目开发模式下背景图片加载的问题。指出在使用行内样式时，直接使用URL路径可能无效，需要通过模块导入的方式解决。文章还介绍了如何在非行内样式中正确配置背景图片。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效，即不能直接在标签中style属性中写，

必须写在非行间样式才会生效。

如果要写在行间样式中，需要对资源进行导入，比如ES规范的import或者CommomJS规范的require

基于vue2使用vue-awesome-swiper 轮播图（踩坑记录）
新手小T
11-10 3633
vue-awesome-swiper 使用（踩坑记录） 提示： 本文介绍是基于vue2.0实现，如果您是vue3.0建议直接去swiper上按照官方文档使用哦。 Swiper官方地址：https://www.swiper.com.cn/
vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机
weixin_44434938的博客
04-26 2989
vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机
vue项目中设置background: url() 是行内样式不生效，样式表是可以的
MISS_zhang_0110的博客
11-17 2229
[TOC](vue项目中设置background: url() 是行内样式不生效，样式表是可以的)首先：如果不是项目中普通的一个index.html中是可以的。
vue 动态绑定背景图片(background:url)
slow097的博客
11-19 7404
<div :style="{backgroundImage: 'url('+img+'/'+infos.img+')'}"> </div>
Vue通过background:url 引入静态图片失效
从入门到放弃的博客
12-20 1万+
例如 <div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}"> ...... </div> ....... img:{ url:'../../assets/bg.png', name: 'bg' } 发现设置背景失败了，图片加载不出来，主要原因是bac...
如何在vue3中正确的引入background:url
u010782109的博客
10-10 3159
第二加入“~”波浪号。第一必须加上双引号。
vue 渲染dom背景图片background url
姚辉乾
01-28 3847
&lt;div class="shopImg" :style="{background:'url('+item.goodimage+')'}"&gt;&lt;/div&gt;
vue.js层叠轮播效果的实例代码
明月如霜丶
02-27 3007
最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家； 主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考； 此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.ba...
vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
Study_Live_Sun的博客
07-27 1万+
1、安装包 2、页面上传方法功能 vue页面 <input v-show="false" id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value=""> 对应方法 getVideo (event) { if (this.player) { this.pl..
Vue + elementUI使用中总结，包括踩坑（更新中）
是日前端
11-11 2780
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
vue中 background-image:url()路径写法
最新发布
qq_51705474的博客
03-14 1068
三、在js写动态路径。
vuejs在css样式表里设置背景图background:url('path'),报错
热门推荐
萧萧的博客
06-26 2万+
解决办法：1、在webpack.prod.conf.js文件里output里面添加：publicPath：'./'2、在utils.js文件里添加 publicPath:'../../'3、在config/index.js文件里，添加assetsPublicPath:'./'css样式表文件这样写这样就可以正常使用了...
vue绑定background_vue动态绑定background：url绑不上的问题
weixin_33458169的博客
12-28 1715
oracle 数据库导出数据cmd导出数据: exp ZD_ZD_ZDWW/zdzd1402!@11.111.111.213/orcl file=c:\1234.dmp owner=ZD_ZD_ZDWW突破自我，开源NetWorkSocket通讯组件前言 在发表之后,收到大家很多个star,在此感谢!更可贵的是,一些网友提出了许多好建议,经过一些时间的思考,决定将NetworkSoc ...js...
vue 在css 引入背景图background: url（艾特assets/img/bg.png) 报错
南极修炼千年的大冰块
11-22 1万+
vue 在css 引入背景图background: url(@assets/img/bg.png) 报错 Cannot find module ‘./@assets/img/bg.png’ 把background: url(@assets/img/bg.png) 改为background: url(~@assets/img/bg.png)
VUE学习——避坑之背景图片路径的添加
ainingzetao的博客
01-05 1675
一般来说咱们添加背景图片，直接使用语句 background: url(); 然后添加路径就好，而vue新建一个项目之后，会有一个assets文件夹，里面放着原始vue logo，我一开始误以为所有的图片都是放在aasets文件夹下，然后使用命令： background:url("../aasets/bg2.jpg"); 添加路径，多次尝试，运行发现总是无法实现加载图片，然后我新建了...
Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)
qq_36048145的博客
02-04 6894
在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题
vue动态绑定background：url绑不上的问题
05-10 1195
场景： 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因：图片路径中存在 （），和 background：url() 会冲突 解决方法： 一：oss图片路径避免出现括号 （）二：对动态绑定的url中的引号做转义处理 转载于:https://www.cnblogs.com/liris/p/9020076.html...
Vue 的Style中background的URl地址build 后找不到图片地址
u013750989的专栏
09-28 4288
vue中的style标签中的background background-image 的路径应该怎么写才能正确的打包出来 Vue 的Style中background background-image 的URl地址build 后找不到图片地址： 1、仅需：在build/utils.js文件夹中添加  publicPath:'./../../' 如下图所示，根据自己创建的Vue project来确...
vue ,background属性的使用
weixin_43703816的博客
04-22 2182
在做一个移动端项目时，需要用加一个圆形的背景， UI给到我图的时候， 我使用了background： url(’ 图片地址’) no-repeat ； 这样的写法 但是，在测试时，发现这个背景的圆，只有一半，另一半消失了。 这是什么情况呢？ 后来才发现 ， background 属性， 是一个简写的形式， background : url(’ 图片地址’) no-repeat center center ; 在最后加上两个 位置 center center ， 就实现了。 ...
理解Vue2.x：虚拟DOM的高效diff算法解析
"这篇文章主要探讨了Vue2.x框架中的虚拟DOM(diff)原理，以及如何通过高效的算法实现DOM的高效更新。作者汪玉林是高级工程师，具有丰富的Web前端架构经验。文章首先介绍了Vue的核心——双向绑定和虚拟DOM，强调了虚拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

WF帆少

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值