Vue2.0中使用less给元素添加背景图片出现的问题

最新推荐文章于 2024-06-25 10:20:33 发布
最新推荐文章于 2024-06-25 10:20:33 发布
阅读量1.3w 收藏 3
点赞数
分类专栏： vue-js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_19327991/article/details/72903955
版权
本文介绍了在Vue2.0项目中使用Less为元素添加背景图片时可能出现的错误及解决方案。错误主要表现为命令行和浏览器报错，原因在于Less变量的不正确使用和URL书写格式问题。解决办法是确保在`url()`中使用变量时，变量以`@{变量名}`形式书写，并避免图片名称包含`@`符号。
摘要由CSDN通过智能技术生成

在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法

background-image: url('../img/' + @{bg_url} + '2x.png');

或者这样

background-image: url('../img/' + @bg_url + '2x.png');

这样

background-image: url(../img/@{bg_url}2x.png);

还有这样

background-image: url(../img/@bg_url2x.png);</
最低0.47元/天 解锁文章
豆i浆
关注
专栏目录
Vue2.0实战
qq_42636335的博客
03-06 6766
目录 项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..
解决Vue2.0中使用less给元素添加背景图片出现的问题
10-18
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 关于如何使用 background-image 属性（真的很详细）
最新发布
(黎子)人生编码
06-25 6194
属性用于设置元素的背景图像。它可以接受一个或多个图像的 URL，以及相关的背景定位、重复、大小和附着方式等属性。
less中引入背景图片的方法
weixin_46419373的博客
04-19 2649
注意点:记得加~号,只使用@会报错 background-image: url("~@/assets/imgs/tableSelect.png");
less 导入图片 以及背景图片属性
xm1037782843的博客
05-25 6597
定义背景图片使用 @baseName:wrap; //url 定义： @img : "../img"; @img :'../image'; #@{baseName}{ width: @c*10; height: @b*10; background: url('@{img}/less.jpg'); } url定义图片的路径 background:url('@{img}/less.jpg'); //错误简写 background: url("@{images}/white-sand.png"..
Less相关的用法以及Vue2.0 中如何使用Less
weixin_34247032的博客
06-05 344
（一）less的用法： （二）vue 2.0中如何使用less插件 1：vue先安装less插件 npm install less less-loader --save 2：修改webpack.base.conf.js文件，配置loader加载依赖，让其在项目中使用less ，配置的方法： 文件下的 rules数组中新增加配置项： { test: /\.less$/,...
vue2（二）
weixin_67398884的博客
07-15 680
过滤器、侦听器、vue-cli
less background-image
weixin_34008805的博客
07-24 1407
.bg-image(@url){ background-image:~"url(@{url}@2x.png)"; @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image:~"url(@{url}@3x.png)"; ...
Less中使用引入背景图片的方法,使用@报错.
weixin_42164352的博客
10-17 1261
less使用背景图片报错
vue.config.js解决less background-image打包后出现路径问题
Lin_mx的博客
02-03 618
解决打包时遇到的css background-image 路径大坑
【vue】less配置图片
Meditation_Crazy
08-13 1206
less配置图片 参考文章：https://blog.csdn.net/qq_39695266/article/details/107693890 实现步骤 首先，创建file.less文件； 其次，在页面里面先通过相对路径配好图片的地址； 然后，把../../../../public/img这块路径复制到file.less的变量中； 最后，把页面中的图片地址替换为file.less中的变量。 页面样式 ...
vue less 切换主题（皮肤）
ellynxu的博客
01-14 2341
记录一下基于vue和less的项目是咋切换主题的。这个方法适用于已经在代码里到处都是less全局变量或mixins，想让每个变量在不同主题下有不同的值的情况。不兼容ie 就以一个颜色举例：假设我已经在项目里使用了很多次@dark1-background: #141414，这个全局变量已经被存放在variables.less里 1. 写一个theme.css用于存放所有主题的所有样式，不同主题下@dark1-background所代表的颜色不同 .dark-theme { --dark1-ba..
在less中使用background-image时，url的设置问题（大坑详解）
zuo_kaizheng的博客
12-21 4174
对于在less样式中使用url报错应该是大家经常遇到的问题 大家应该都百度到这样的解决代码 对于第一次遇到这个问题看到这样的代码一脸懵逼，这里的@url是啥子意思，这里的路由该怎么写，好难啊 要泪崩了 问题详解 在类名前面一定要有（@url）这个参数，整个url(@/images/home/icons.png) 路径 要用 " " 包裹着在前面还要加个 ~ 符号 （相信大家用过这个波浪号，千万别写成—了） 如果看到这里的url解释，相信大家都能轻松解决这个问题了 ...
在less中使用background-image时，url的设置问题
weixin_44771007的博客
05-15 3693
本来尝试了一下es6的模板字符串，然后也没成功 .bg-image(@url) { background-image: ~"url(@{url}@2x.png)"; @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image:~"url(@{url}@3x.png)"; } } 在less中，符号 ~ 后面的双引号的内容会被less编译时忽略 less的符号 @ 和 {}
webpack background-image css 显示不了
wyk304443164的专栏
05-12 4372
webpack.config.js看一下区别：oldvar path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require("html-webpack-plu
vue踩坑--background-image路径问题
热门推荐
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
利用less实现多主题切换（配合天气现象）
cnailili的博客
09-08 908
创建src/assets/style/variables.less 使用 @XXX:var(–XXX,‘style’) 声明系列变量，之后添加其他变量直接增加即可（由于之后要配置颜色，默认值可以先给" "）也可以声明一下常用的class，方便全局使用（这里已.backgroundCard 为例）原理：先给body元素添加style，再根据天气现象动态更改style。
vue2.0中使用ant-design-vue
08-16
在Vue 2.0中使用Ant Design Vue，你需要按照以下步骤进行设置： 1. 首先，安装Ant Design Vue的依赖包。你可以使用npm或者yarn进行安装。打开终端，运行以下命令： ``` npm install ant-design-vue --save ``` ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值