关于在less中引入背景图片问题

最新推荐文章于 2024-08-30 16:32:29 发布
最新推荐文章于 2024-08-30 16:32:29 发布
阅读量6k 收藏
点赞数
分类专栏： 问题 文章标签： web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40944918/article/details/97426385
版权

问题：在Less中引入的背景图片路径（相对路径）是从该Less文件出发，导致引入的图片在网页中会找不到路径
解答：引入的路径应该是从Less生成的Css文件目录出发

Vue2.0中使用less给元素添加背景图片出现的问题
删库跑路
06-07 1万+
在使用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);还有
less中引入背景图片的方法
weixin_46419373的博客
04-19 2743
注意点:记得加~号,只使用@会报错 background-image: url("~@/assets/imgs/tableSelect.png");
解决Vue2.0中使用less给元素添加背景图片出现的问题
10-18
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 动态style[‘background‘] 图片url 打包后图片不显示没有打包到目录的为你
最新发布
oMangGuoBuDing1的专栏
08-30 509
做了一个项目需求是 动态赋予多个div的背景图片，背景svg是后台数据中给的。刚开始显示不出来后来解决了（好用代码也如下可参考），后来又发现一个问题是 开发环境下可以正常显示，但部署后 svg图片不显示，排查发现是打包后根本没有把这个url对应的图片放到部署目录的assets中。然后又在网上找发现原因是太小的图片 被打包编译成了base64，因为放尺寸大一点的图片就显示正常。做法是把打包的base64尺寸阈值调成0，这样所有svg图片都可原样正常打包放入到assets中就解决了设置方法如下。
less 导入图片 以及背景图片属性 注意
qq_39695266的博客
07-30 2812
// Variables @images: “…/img”;//相对于本less 文件的路径 // Usage body { color: #444; background: url("@{images}/white-sand.png"); } //错误简写 background: url("@{images}/white-sand.png") 14px 14px;//少图片位置属性 图片不会显示 //正确简写 background: url("@{images}/white-sand.png") ce
less 导入图片 以及背景图片属性
xm1037782843的博客
05-25 6677
定义背景图片使用 @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简写css的背景图样式
weixin_43956521的博客
12-09 1008
在less文件中定义 .bg(@file) { background: url('@{file}') no-repeat; background-size: 100% 100%; } 在less文件中其他设置背景图的地方使用 即可完成简写 .bg('***.jpg'); 当然less文件中也支持定义变量 @boxWidth: 1000px; //盒子宽度 width: @boxWidth; 写less样式代码更加快捷、简便 ...
Less中使用引入背景图片的方法,使用@报错.
weixin_42164352的博客
10-17 1303
less使用背景图片报错
小程序-url引入背景图片写在样式处会报错，写在行内不包错.zip
09-04
标题提到的问题是关于“小程序-url引入背景图片写在样式处会报错，而写在行内不会报错”。这个问题涉及到小程序对CSS样式的处理方式以及其资源加载机制。下面我们将详细探讨这个问题及其解决方案。 1. **CSS样式...
项目中的less文件和图片资源
11-10
本项目中的"项目中的less文件和图片资源"着重关注了如何在实际项目中管理和使用 Less 文件以及相关的图片资源。 首先，我们来详细了解一下 Less。Less 是由 Alexis Sellier 开发的，它允许开发者定义变量、混合...
less引入背景图，打包后路径错误
06-10
如果在使用 `less` 引入背景图时，打包后路径错误，可能是由于引入的路径不正确导致的。你可以尝试以下几种方法来解决这个问题： 1. 相对路径引入图片：在 `less` 文件中使用相对路径引入图片，例如 `background-...
解决 webpack5 打包 css 背景图片问题
qq_45770253的博客
03-31 1823
现在我在src/css/style.css文件中，设置全局的图片： /* 设置一张背景图片 */ body { background: url('../img/image.jpg'); } 在index.js文件中引入该css文件： // 导入 css 文件 import './css/style.css' 来看webpack.config.js的配置： // 导入 path 的 resolve 模块，进行路径拼接 const { resolve } = require('path'..
Less的图片管理
weixin_34245749的博客
06-02 1013
开头 从18年8月开始，我开始了我的野生前端职业生涯。不管是自学期间还是工作之后，网上的文章对我的学习帮助良多。所以我想开始分享一些我没在网上看到过的知识。 图片载体 通常我们展示图片是用html的<img>标签或者css的background-image属性。 由于安卓手机会对点击的<img>进行放大显示，所以本人喜欢用background-image多一点。 安卓&lt...
【vue】less配置图片
Meditation_Crazy
08-13 1253
less配置图片 参考文章：https://blog.csdn.net/qq_39695266/article/details/107693890 实现步骤 首先，创建file.less文件； 其次，在页面里面先通过相对路径配好图片的地址； 然后，把../../../../public/img这块路径复制到file.less的变量中； 最后，把页面中的图片地址替换为file.less中的变量。 页面样式 ...
React 中引入本地图片和背景图片的方法
热门推荐
AliceWu的博客
07-16 2万+
1、在webpack.config中找到相应的图片路径的缩写配置（不是所有的项目都有缩写配置的，在大型项目中为了书写方便进行缩写配置） 2、接下来就要说引入图片的方式了 如果不是背景图片的话，有以下两种方式 ①直接在内部引用 ②使用import方法 import img from 'Image/weixin_erweima.png' //引入图片的路径 &amp;amp;amp;amp;amp;lt;img ...
vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...
weixin_39646084的博客
12-20 1370
用vue-cli3脚手架新建的项目，在使用less设置背景图片的时候遇到了路径报错问题，该如何正确设置背景图片的路径？项目目录如下：现在在css文件中有一个全局样式common.less。使用的是images的一张图片icon.png。common.less是通过vue.config.js里面全局这样引用的，如下代码：pluginOptions: {'style-resources-loader'...
vue less 在style中使用动态背景图
NI_chunz的博客
03-07 577
vue 在样式中使用变量
在vscode写less的时候background图片不生效问题解决办法
ATTK_Time的博客
05-23 840
发现问题历程： 今天在写网页的时候用less一直北京图片不生效，也在网上查找了一些资料，但是都没有解决，然后我就去生成的css文件看了下生成的样式，发现了问题的原因。 解决办法： 在less写背景相对路径的事后要从生成的css文件出发，而不是less文件本身的位置。 ...
less循环不同的背景图片
张井乙ccccyc的博客
02-22 4102
最近项目接触了less，这里就记录一下写less遇到的小问题，当做备忘，也希望能对看见此文的大家有些许帮助。~~首先我在写样式的时候觉得一个个的写背景图有些麻烦，想既然是less那就一定会有更加便捷的方法，一搜果不其然就是有方法。不废话，上代码 加一个前提，就是你的图片命名必须是xxx1，xxx2这样的连续数字命名，不然无法使用变量。 示例代码 //less中的背景图片循环 .nav_r(@n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值