CSS中background-image:url(图片路径) 不能显示的问题

原创 已于 2023-07-05 22:40:43 修改 · 9.6k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #前端

于 2023-07-05 22:04:51 首次发布
文章描述了一位开发者在处理网页图片显示时遇到的问题，通过检查样式、验证图片本身以及尝试不同的相对路径。最终发现使用上级目录路径../img/1922.jpg才能使图片正确显示，这个问题可能涉及到HTML的路径解析规则。

 开始如上图所示，然后发现图片死活出不来

通过几种方法排查：

1、通过添加其他样式如background-color: blue; 判断写法没问题；

2、把图片用浏览器打开也可以正常显示，所以图片没问题；

3、基本就是路径问题用了好几种写法都不行/img/1922.jpg、../img/1922.jpg

最后发现用下面这个写法可以了，我也不知道为什么要从上一级目录开始，和img标签的路径写法不一样，留个记录

小小大大q
关注
Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值
简简单单Onlinezuozuo
05-29 1万+
文章目录Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值1、设置背景2、直接嵌入样式代码 Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值 1、设置背景 在设置时，要通过把样式属性分离开，然后通过表达式进行拼接的方式进行动态的设置，其它类似的...
HTML：CSS中background:url()或background-image:url()不显示图片的可能解决办法
blog
08-07 1万+
要确保能用浏览器打开图片，然后复制地址栏里的路径，粘贴到url()的括号里面。在资源管理器里复制的路径和浏览器地址栏里的路径可能会不一样，比如斜杠“/”和反斜杠“\”的区别。 ...
用background-image:url();属性设置背景图片，为什么总是显示不出来？
热门推荐
Strenghthen的博客
09-06 9万+
如标题一样，找了好久，最后才发现是url()里面的路径没写对！ 为什么会没写对？想了一下原因：惯性思维，用了标签设置src属性的方式来设置url()里面的引入图片的方式。 那么，我的文件目录的安排是什么一个情况呢？ gen目录下 ->  css文件夹 images文件夹 - > bg.png index.html 设置某个元素的背景图片：background-image:
background:url(imagepath)不能显示图片
CF西西的专栏
09-20 1559
刚刚碰到一个诡异的问题，这样一段CSS代码： background:url(images/bg1.gif) no-repeat; 这段代码居然不能显示出背景图片。 代码肯定没有问题，即便我没有对背景图片定位，这里暂不考虑，因为我这里不存在这个问题。。。于是乎，搜
background-image 无效
qq_33240556的博客
05-22 3855
如果以上都检查过还是无效，可以尝试在浏览器的开发者工具中查看元素（Inspect Element），并检查计算的CSS（Computed tab）看是否有其他CSS规则覆盖了你的。：最常见的原因是图片的路径不正确。确保您的图片路径是相对于样式表（CSS文件）的相对路径，或者是绝对URL。：确认图片文件的权限设置允许Web服务器访问。：确保浏览器支持您使用的图片格式（通常为jpg、png、gif等），并且服务器正确配置了MIME类型。：尝试清除浏览器缓存，有时候旧的CSS或图片文件会被缓存，导致更改不生效。
【WEB】关于网页设置 background-image: url死活显示不出来的解决办法
@point
03-24 2万+
图片或者背景显示不出来，大部分都是路径的问题。 这是我图片所在的文件夹。相信很多有这个问题的小伙伴都是像我下面这样写的路径。那么背景图是不会显示出来的。。 解决办法如下图！ 原因是： 在img的src中，是以当前html网页做相对文件，来设置引入图片的路径。 在外部样式css文件中，设置某个元素的background-image的url()；是以你当前的css文件所在路径做为相对路径找起。 ...
外部样式表中Background-Image:url()的设置不能显示解决方案
Logan's
12-15 6212
我遇到了一个问题，就是在外部CSS文件中定义了背景图，无法在引用它的html文件中显示。具体来说是这样的：样式表文件Style1.css放在~/Style文件夹下，在~/Admin文件夹下有个index.aspx引用了这个外部样式表， 在Style1.css文件有这样的定义： .logo{background-image:url(../pic/logo.jpg);width:900px; he
vue的style绑定background-image的方式和其他变量数据的区别详解
10-18
我们通过将图片路径与URL字符串拼接，并包裹在url()函数中，从而形成一个合法的样式值。 当我们处理其他样式属性时，如background-repeat、background-position等，由于这些属性接受的是关键字或者度量值，所以我们...
background-image: url的路径格式
12-31
`background-image: url` 是 CSS 中用于设置元素背景图像的属性。路径格式可以有多种形式，具体取决于图像文件的位置和引用方式。以下是几种常见的路径格式： 1. **相对路径**： - 如果图像文件与 CSS 文件位于...
设置background-image:url()路径不显示
08-22
在CSS中使用`background-image`设置背景图片时，图片无法正常显示是一个常见的问题。以下是一些可能的原因及对应的解决方法，适用于不同场景下的路径问题。 ### 1. 检查路径是否正确 路径错误是`background-image`...
#btn_testA{ color: transparent; background-color: transparent; background-image: url(:/recources/icons/testA_normal.svg); /* 指定图片路径 */ background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ } #btn_testA:checked { color: transparent; background-color: transparent; background-image: url(:/recources/icons/testA_check.png); /* 指定图片路径 */ background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ }为什么check状态生效不了
最新发布
10-21
**图片路径问题**：检查`:checked`状态下指定的图片路径`url(:/recources/icons/testA_check.png)`是否正确。注意路径中的拼写（recources应该是resources？）以及文件是否存在。另外，注意文件扩展名（.svg和.png...
html backgroundurl无效,css background不显示是什么原因？
weixin_34053992的博客
06-04 8068
在CSS中，可以使用background属性来设置背景，可以设置背景色，也可以设置背景图片。但有时background不显示，这是什么原因？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。css background不显示是什么原因？1、css没有被调用；请检查css调用是否成功，2、div设置错误容易导致背景图片高度太大则无法显示，3、css设置背景用的background，书写方式是.di...
background：url不显示图片和几个CSS动画
qq_53318060的博客
05-16 2593
vue中background：url(img)不显示图片 也可以使用内嵌式，图片使用require导入，div也要有高度的，否则也是不显示。 <div id="login-container" :style="{background: 'url(' + bgImg + ')'}"> 事件绑定的函数中传入dom参数 <input type="text" name="" @focus="focusAction($event.target)" @blur="blurAction($event
webpack解决：background-image: url([object Module]) 的图片无法显示的问题；
狮子座的男孩
10-13 2742
在项目打包的时候 `npm run build`，项目控制台及浏览器控制台没有报错，但在浏览器页面中，指定的背景图片没显示;
CSS中background:url(图片) 不能显示的问题
KELION1234的博客
11-20 1万+
刚刚碰到一个奇怪的问题，这样一段CSS代码：1 .pho6 {background: url(img/pho6.jpg); }这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题，俄,百度了好久终于让我给找到了真正的问题在哪？在url(imagepath)里的这个imagepath(图片路径)。原来它是相对于.css文件所在的文件夹，也就是调用css文件夹下的子文...
【解决】Vue3 background-image:url()不显示问题
qq_22334245的博客
10-14 5654
使用vue3时想给一个div设置背景图片，一开始把background-image:url(xxx/xxx.png)写在了div的style里，背景图片怎么也显示不出来。图片路径也确认过没有问题。给div添加了class属性，并把background-image:url(xxx/xxx.png)改写到中，背景就可以显示了。
html 找到背景图片路径,background-image中url找不到路径，背景图像无法显示
weixin_29238147的博客
06-04 6056
在对应的DIV中能够显示图片但是当把路径复制变成内联样式表中的background-image时候在原来图中却不能显示背景图片，在fireBUG中显示URL载入错误，这是怎么回事了？#body_left_secend_1 {width:293px;height:300px;background-image:url(../Images/images...
CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因
Always-Learning
11-14 6142
问题描述 CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因 例如：下面的写法不显示图片 background-image: url(../upload/bargain.png) no-repeat; 下面的写法却显示图片 background-image: url(../upload/bargain.png); background: url(../upload/bargain.png) no-repeat; 问题原因 因为back
在css样式表里面引用background-image没有出现图片原因与解决方法
xiguabanhua的博客
08-16 5万+
今天写网页的时候遇到一个问题，在样式表里面引用background-image，没有出现效果。然后查了一下是因为相对路径和绝对路径的问题，还有一个是对css样式表的引入的误解，这类文章别的博客已经有的说的比较清楚了。我现在也想按我的思路记录下来对我来说更有可读性。 在css样式表background-image：url()；失效的原因 比如最简单的，我建了一个文件夹名为：螺丝定制（最好是英文命名
【问题】background:url(imagePath)不能显示图片
weixin_30664051的博客
05-01 495
遇到一个问题background:url(images/a.jpg)不能正确的显示图片，在查找问题后发现是这个imagePath的问题，这里的images/a.jpg是基于css路径的，也就是css文件夹下的imagePath，而这个路径是不存在的，改成background:url(../images/a.jpg);就正确了 转载于:https://www.cnblogs.com/hg...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值