【HTML/JS】Img的src指向的图片不存在，让img不显示出来

最新推荐文章于 2023-05-26 09:49:18 发布
转载 最新推荐文章于 2023-05-26 09:49:18 发布 · 9.8k 阅读 · 3

本文介绍了一种简单的方法来处理网页中图片加载失败的情况，通过使用JavaScript函数NoImage，可以实现当图片src路径无效时，自动将该图片元素设为不显示。

http://tuqiang9999.blog.163.com/blog/static/332413201211023431619/

Img的src指向的图片不存在，让img不显示出来  




<script type="text/javascript">   function NoImage(imgObject){   this.style.display="none";  } </script> 


<img src=''  onerror=""javascript:NoImage(this)"" />


HTML 图片不存在则显示一个默认图片
08-10
为了解决这个问题，开发者通常会使用一种技巧，即当指定的图片不存在时，显示一个默认的占位图片。这个技术可以通过HTML的`<img>`标签和`onerror`事件属性来实现。 首先，我们来看`<img>`标签的基本结构： ```html...
JSP结合js实现img中src更新请求的方法
10-23
总结来说，这个例子展示了如何利用JavaScript和JSP进行前后端交互，实现在不刷新页面的情况下动态更新img标签的src属性，达到刷新图像的目的。这种方法在许多场景下都非常实用，特别是在需要频繁刷新内容（如验证码...
uniapp中的image的src=“路径”图片不显示
m0_64207574的博客
11-13 3083
uniapp中的image的src=“路径”图片不显示
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 5450
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
js图片加载不出来时隐藏图片
NOyesNONO_的博客
06-06 1303
可以在onerror里写上隐藏图片的内容，以便当图片加载失败时，不要显示成一个叉号
ie6下使用js替换img标签src属性图片不显示的错误
weizuqing的专栏
08-26 400
首先，我必须再次强调一下，F-U-C-K I-E！ 其次，简单阐述一下这个bug的出现的情况。页面中有个这么一个a标签，swapImgSrc这个方法就是替换页面上一个img标签的src属性，以达到动态切换图片路径的效果。但是，但是，在IE6这个浏览器下图片就不会显示，用鼠标右键点击图片应该在的位置选择“显示图片”才能看到图片内容。使用httpwatch等神器可以发现新图片的加载被aborte...
java图片不显示img_java和javascript中过滤掉img形式的字符串不显示图片的方法
weixin_42520448的博客
02-13 222
本文实例讲述了java和javascript中过滤掉img形式的字符串不显示图片的方法。分享给大家供大家参考。具体实现方法如下：1. javascript过滤掉和形式的字符串过滤html中的img属性 var htmlContent = ""; var data = htmlContent.replace(/.*/ig,""); //过滤如形式的图片元素 data = da...
vue中img src 动态加载本地json的图片路径写法
10-17
<img class="thumb" width="200px" height="150px" src="@/assets/img/world.jpg" /> ``` 为了使`@`别名生效，我们需要在`webpack`配置文件（通常是`vue.config.js`或`webpack.config.js`）中设置别名，例如： ```...
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
10-15
在Vue开发过程中，有时会遇到动态设置img的src属性无效，尤其是在执行`npm run build`构建生产环境时，图片资源无法找到的问题。这个问题通常源于Vue的打包机制和资源路径处理方式。以下是对这个问题的详细解释和...
Jquery动态改变图片IMG的src地址示例
12-09
这行代码会在文档加载完成后执行，确保 `img_a` 图片元素已经存在于 DOM 中，然后将其 `src` 属性更改为新的图片地址 "login_image/b_2.jpg"，实现了图片的动态替换。 此外，注意到 HTML 中的 `onfocus="this.blur...
html图片地址无效,html img src 图片路径不存在或无效
weixin_29264201的博客
06-03 1827
html img src 图片路径不存在或者存在但是路径无效无法正常加载出来的情况，动态替换成有效的默认图片，解决办法。通常的判断为：if(pic==null){ html='';}else{ html='';}但如果当src路径存在，但路径无效导致无法正常加载时，可以利用img 的 onerror 事件来解决：if(pic==null){ html='';}else{ html=''...
HTML img src图片路径不存在，则显示一张默认图片的方法
阅读之后，对你有帮助，那就点个赞再走吧
05-25 6896
我们一般会给图片设置alt属性，当图片路径不存在时可以显示提示文字。 <imgsrc=""alt="图片加载失败"> 如图所示： 但是这样很不好看，如果用在文章列表，我们可以给 img 标签设置一个onerror属性，可以在src路径不存在时显示指定的默认图片。 测试一下，我没有给src设置图片链接，代码如下： <imgsrc=""onerror="this.src='img/error.png'"/> 很明显，我们可以看出，当src属...
js或jquery判断字段为空不显示图片img
qq_45094682的博客
09-05 966
判断图片是否有值去显示图片或不显示 注意：图片img 的属性alt一定不能有值，不然你写值就是src属性没值也会显示alt里的内容 用三元表达式直接判断是否为空就行了
判断图片是否存在，不存在则显示默认图片
weixin_30675247的博客
06-17 1197
记录每一个小坑、大坑 利用image对象的onerror事件来判断，出错则更换image对象的src为默认图片的 URL html 代码 <img src="./img/No_Pics.jpg" onerror="javascript:this.src='./img/No_Pics.jpg'" alt="" id="img"> j...
用Javascript判断图片是否存在，不存在则显示默认图片
10-07 175
<xmp><img src="http://www.iecn.net/images/logo_home.gif" onerror="javascript:this.src='http://www.cnlei.org/BLOG/styles/style2007/images/logo.gif'" /></xmp><img src="http://w...
判断（img标签）中src的路径中照片文件是否存在
热门推荐
liayn523的博客
09-19 2万+
判断（img标签）中src的路径中照片文件是否存在
图片不存在时，显示一个默认的图片
LzwGlory的专栏
11-17 1826
1. [代码]img标签src对应的图片不存在，显示一个默认的图片      ? 1 img src="abc.JPG" onerror="this.src='default.JPG'" /> 2. [代码][CSS]引用“何世友@PoQoP”童鞋的方案      ?
请求后打开新页面被拦截_拦截新的Image（）。src请求
cunbei2644的博客
09-26 928
请求后打开新页面被拦截Maybe you're an attacker who sneaked in a little JavaScript to an unsuspecting site and would like to, well, sneak. Or maybe you want to know what exactly all these third-party analytics sc...
html判断是否含有图片,html img src 判断图片路径是否有效
weixin_30348133的博客
06-10 1753
html img src 图片路径不存在或者存在但是路径无效无法正常加载出来的情况，动态替换成有效的默认图片，解决办法。通常的判断为：if(pic==null){html='';}else{html='';}但如果当src路径存在，但路径无效导致无法正常加载时，可以利用img 的 onerror 事件来解决：if(pic==null){html='';}else{html='';}分析：特别注意 ...
html用<span><img src></span>，显示不出图片
最新发布
05-09
<think>好的，我现在要解决用户的问题：在HTML中使用`<span><img src></span>`时图片无法显示的问题。用户提到图片不显示，需要找到解决方案。首先，我需要分析可能导致这个问题的原因，然后根据经验和参考资料给出解决方法。 首先，用户的结构是span包裹img标签，图片不显示。可能的原因有很多，我需要逐一排查。常见的图片不显示的原因包括路径错误、图片损坏、HTML结构问题、CSS样式影响等。用户提到的是span包裹img，所以可能需要检查HTML结构是否正确，以及CSS是否有干扰。 首先，检查img标签的src属性是否正确。路径错误是最常见的问题，用户可能使用了相对路径或绝对路径不正确，导致图片无法加载。需要确认src的路径是否正确，图片是否存在，文件扩展名是否正确，比如.jpg、.png等。例如，如果用户写成`<img src="image.jpg">`，但实际图片名为`image.png`，或者路径不对，就会导致不显示。 其次，查看是否有CSS样式覆盖了图片的显示。比如，span或img被设置了display:none，或者visibility:hidden，或者opacity:0，这都会让图片不可见。另外，如果父元素有overflow:hidden，而图片尺寸过大，可能会被裁剪。此外，参考引用[2]中提到，img作为行内块元素可能有默认的vertical-align属性，但这里的问题是不显示，而不是间隙，所以可能不相关，但需要确认是否其他样式影响了显示。 另外，span默认是行内元素，包裹img是否会影响布局？img本身是替换元素，默认是行内块元素，所以span包裹img应该不会有问题。但如果span被设置了某些样式，比如font-size:0，或者line-height:0，可能会导致图片尺寸异常。参考引用[2]中的解决方案3.5和3.6，设置父元素font-size或line-height为0可能用来解决间隙问题，但如果用户误用了这些样式，可能导致图片显示问题。比如，如果用户给span设置了font-size:0，可能影响内部内容，但img的显示应该不受影响，因为img的尺寸由自身决定。不过需要检查是否有此类样式。 另外，检查是否有JavaScript错误导致图片被动态隐藏，或者src被修改。但用户的问题可能不涉及JS，而是纯HTML结构的问题。 接下来，我需要给出解决方案步骤： 1. 检查图片路径是否正确，确保src属性指向正确的图片文件，并且路径正确。可以尝试使用绝对路径测试，或者确认相对路径的正确性。例如，如果HTML文件和图片在同一目录，直接写文件名；如果在子目录，需要加上路径如`images/image.jpg`。 2. 检查图片文件是否损坏，尝试用其他图片替换，或者在其他地方使用该图片确认是否正常显示。 3. 检查HTML结构是否正确，确保img标签正确闭合，没有嵌套错误。例如，span是否正确包裹img，没有遗漏闭合标签。 4. 检查CSS样式，特别是span或img的display属性是否被设置为none，或者visibility、opacity等影响显示的属性。使用浏览器的开发者工具（如Chrome的检查功能）查看元素，确认是否有样式覆盖导致图片不可见。例如，如果img被设置了`display: none;`，则需要移除该样式。 5. 检查父元素的布局限制，如span或上级元素是否设置了固定宽高，导致图片被裁剪或溢出隐藏。例如，父元素有`width:0; height:0;`或`overflow:hidden;`，导致图片无法显示。参考引用[2]中的方法3.3，用户可能设置了overflow:hidden导致图片被隐藏，但这里的问题是不显示，可能需要检查父元素的尺寸是否足够。 6. 确认图片的格式是否被浏览器支持，比如webp可能在旧浏览器中不支持，但现代浏览器一般没问题。不过用户的问题更可能是路径或样式问题。 7. 检查服务器或文件权限，确保图片文件可被访问，没有服务器配置问题导致图片无法加载。 根据这些可能的原因，逐步排查。例如，用户可能错误地设置了span的样式，导致图片无法显示。或者图片路径错误，比如大小写不匹配（在区分大小写的服务器上）。或者图片未正确上传到服务器。 另外，参考引用中的例子，虽然用户之前的问题是关于图片下方的间隙，但解决方案中的某些方法可能被误用导致图片不显示。例如，设置`display: block`给img可能影响布局，但不会导致不显示，反而可能解决间隙问题。但用户的问题是不显示，所以需要更基础的检查。 可能的示例代码： 用户的结构可能是： ```html <span> <img src="image.jpg"> </span> ``` 如果图片路径正确，这应该正常显示。如果路径错误，则无法加载。比如，src写成了"image.jpeg"而实际是"image.jpg"。 另一个可能是，用户使用了base64编码的图片，但格式不正确，导致无法解析。 此外，如果用户将img的宽度或高度设置为0，也会导致不显示，比如： ```css img { width: 0; height: 0; } ``` 需要检查是否有这样的样式。 总结步骤： - 确认src正确 - 检查图片文件 - 检查HTML结构 - 检查CSS样式 - 使用开发者工具查看元素和网络请求，确认图片是否加载成功 如果用户按照这些步骤检查，应该能找到问题所在。例如，开发者工具的Network面板可以查看图片请求是否返回404，或者控制台是否有错误信息。 最后，生成相关问题，帮助用户进一步排查类似问题。</think>在HTML中使用`<span>`包裹`<img>`标签时图片无法显示的问题，通常由以下原因及解决方案构成： --- ### **一、基础排查步骤** 1. **检查图片路径** - 确保`src`属性指向正确路径，使用**绝对路径**测试： ```html <span><img src="http://example.com/images/photo.jpg"></span> ``` - 相对路径需确认目录层级（如`../images/photo.jpg`）[^1]。 2. **验证图片文件有效性** - 检查图片格式（如JPEG/PNG）是否损坏，尝试替换其他图片测试。 3. **查看HTML结构完整性** - 确认标签闭合正确，避免嵌套错误： ```html <!-- 错误示例：span未闭合 --> <span><img src="photo.jpg"></div> ``` --- ### **二、CSS样式干扰排查** 1. **检查元素显示属性** - 通过开发者工具（F12）查看`<img>`或`<span>`是否被设置为`display: none`或`visibility: hidden`[^2]。 2. **修复尺寸限制问题** - 若父元素设置了`width: 0`或`height: 0`，需调整尺寸： ```css span { width: 100px; height: 100px; } /* 确保足够容纳图片 */ ``` 3. **重置行内元素基线对齐** - 添加样式修正`vertical-align`（避免基线对齐导致的空白占位）： ```css img { vertical-align: bottom; } /* 或 display: block; */ ``` --- ### **三、代码示例** ```html <!DOCTYPE html> <html> <head> <style> span { display: inline-block; /* 确保span作为容器 */ width: 200px; } img { width: 100%; vertical-align: middle; /* 消除基线间隙 */ } </style> </head> <body> <span> <img src="image.jpg" alt="示例图片"> </span> </body> </html> ``` --- ### **四、高级调试技巧** 1. **浏览器开发者工具** - **Network标签**：查看图片是否返回`404`错误。 - **Elements标签**：检查元素是否被CSS隐藏或尺寸压缩。 2. **临时禁用CSS** - 在开发者工具中禁用所有CSS，观察图片是否显示，定位样式冲突。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值