vue中利用行内样式动态设置背景图background-image不显示的问题

已于 2023-12-28 11:45:06 修改
阅读量3k 收藏 8
点赞数 14
文章标签： 前端 vue.js css3
于 2023-12-28 11:41:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nana18874597151/article/details/135264640
版权

以下用4种方式设置背景图片

运行之后我们会发现，带有@的路径都没有显示

到这里为止，我们只需要将@换成 根目录（src）即可。

以下是解释，想了解的可以继续往下看

当我们打开调试工具的时候会发现，第一个和第三个的样式如下图所示

发现浏览器解析出来的路径仍为 /@/assets/store_images/big.png

随后我们进行修改

我们发现在样式表里面设置的 @ 又是可以的

随后翻阅资料了解到

在Vue项目中，行内样式和样式表的编译规则是有所不同的。当你在Vue中的行内样式中使用相对路径引用图片时，编译后的结果仍会保持不变。

所以这才导致找不到访问图片的路径，所以不显示，所以在vue中动态设置背景图片的时候，我们需要使用绝对路径

na努力学习前端
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 动态绑定背景图片的方法
12-29
vue动态绑定背景图片的方法，具体介绍如下所示： 1.backgroundImage && 三目运算符 <div class=right-con xss=removed> 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + ...
解决Vue2.0中使用less给元素添加背景图片出现的问题
11-30
在Vue 2.0项目中，使用Less进行样式编写时，可能会遇到给元素添加背景图片时出现的问题。本文将详细解析这个问题的成因，并提供正确的解决方案。 首先，我们需要理解Less是一种预处理器，它允许我们使用变量、嵌套...
vue使用img标签:src属性动态引入资源路径的方法
weixin_44341110的博客
07-02 3271
vue中img动态绑定资源的方法
关于vue前端项目图片背景出不来【已解决】
阿丹的博客
05-26 2716
阿丹场景描述：之前在写个人博客的网站的时候使用vue来完成前端，发现背景图片出不来，尝试了很多办法，从晚上查找了很多个方法但是都出不来。根据其他博主的方法成功实现了。阿丹将方法提供出来。发现解决这个问题有很多需要付费的文章。
background-image 无效
qq_33240556的博客
05-22 848
如果以上都检查过还是无效，可以尝试在浏览器的开发者工具中查看元素（Inspect Element），并检查计算的CSS（Computed tab）看是否有其他CSS规则覆盖了你的。：最常见的原因是图片的路径不正确。确保您的图片路径是相对于样式表（CSS文件）的相对路径，或者是绝对URL。：确认图片文件的权限设置允许Web服务器访问。：确保浏览器支持您使用的图片格式（通常为jpg、png、gif等），并且服务器正确配置了MIME类型。：尝试清除浏览器缓存，有时候旧的CSS或图片文件会被缓存，导致更改不生效。
Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)
qq_36048145的博客
02-04 2728
在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
VUE中图片和背景图引用（img和background-image）
scry丶坏坏的博客
04-03 1万+
vue中图片和背景图引用（img和background-image） 一、背景图引入 1.第一种方式 <div class="bgimg"></div> .bgimg{ width: 150px; height: 60px; /*以下两种路径方式都可以*/ /*background-image: url('../../../../asset...
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项目中加入图片和背景图：img、background-image
m0_72822997的博客
02-21 3581
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042。/*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
VUE:背景图片 background-image平铺
m0_64393334的博客
04-24 1832
VUE:背景图片background-image平铺。
vue动态绑定background
weixin_51780751的博客
02-24 6391
background是background-color，background-image，background-repeat，background-attachment，background-position，background-size等属性的缩写。这篇文章我用动态绑定background-image来举例。
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可...
Vue项目中设置背景图片方法
08-28
这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，图片并不能够正确的显示出来。 要解决这个问题，我们可以使用 Node 中的一种比较有效的方式来解决这个...
vue的style绑定background-image的方式和其他变量数据的区别详解
10-18
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
热门推荐
lingliu0824的博客
07-25 2万+
（以下情况是通过style设置内联样式时发生的问题，在外部css文件和style标签里面定义的样式不会出现以下问题） 我们可能会通过以下这种方式来设置元素的背景（注意元素需设置宽高，或者元素里有内容支撑） 使用vue-cli创建项目后，使用以下三种方式设置背景样式时，第一种方式无法生效，后面两种方式OK， 使用第一种方式时，无论这里用@/assets/logo.png，~@/assets/logo.png，…/assets/logo.png作为背景图片路径都无法成功，这里确定，图片路径是没有问题的 我
vue动态添加背景图
maocilang的博客
02-06 9481
vue动态添加背景图
Vue 关于如何使用 background-image 属性（真的很详细）
最新发布
(黎子)人生编码
06-25 2352
属性用于设置元素的背景图像。它可以接受一个或多个图像的 URL，以及相关的背景定位、重复、大小和附着方式等属性。
vue中el-button设置背景图像不显示
04-27
要在 Vue 中设置背景图像，可以使用 `background-image` 属性来设置。你可以在 `style` 中设置该属性，或者在 `class` 中设置。 下面是一个例子，演示了如何在 Vue 中设置背景图像： ```html <template> <div> <el-button class="my-button">按钮</el-button> </div> </template> <style> .my-button { background-image: url('/path/to/image.jpg'); background-size: cover; } </style> ``` 在上面的例子中，`background-image` 属性设置为图像的 URL。`background-size` 属性设置为 `cover`，以确保图像占满按钮的整个区域。 如果你仍然无法看到背景图像，请检查图像的路径是否正确，并确保图像可访问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值