HTML 如果找不到图像

HTML if image is not found

提问人:David19801 提问时间:11/3/2011 最后编辑:PekkaDavid19801 更新时间:11/23/2021 访问量:253318

问:

我在 HTML 页面中有一个图像:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

如果在服务器上找不到图像,则会显示一个丑陋的空白方块。

我想让它,如果找不到图像,它将不显示任何内容,或者我知道肯定在服务器上的其他默认图像。

这怎么能做到呢?

[HTML全文]

评论

2赞 David19801 11/3/2011
我得到了网站图标,有些网站没有。
0赞 Pekka 11/3/2011
在这种情况下,也许先执行服务器端或客户端请求,以查看返回的状态代码?
0赞 David19801 11/3/2011
我尽量不使用 js,因为我不喜欢慢速网站,而且有太多的网站图标无法在服务器端这样做,它会使服务器被禁止。
1赞 leetheguy 10/13/2017
@Pekka웃 当然,您应该在网站上有有效的链接。如果链接不是在你自己的网站上,而是在别人的网站上怎么办?或者,如果它们来自远程数据存储并且需要一段时间才能下载,该怎么办?

答:

3赞 juankysmith 11/3/2011 #1

您可以通过添加以下选项来显示替代文本:alt

<img src="my_img.png" alt="alternative text" border="0" /> 

评论

0赞 juankysmith 11/3/2011
也许这个方块来自包含你的 img 的 div(或其他标签)
0赞 JohnFlux 3/16/2019
如果 IMG 显示样式为“块”,则 alt 似乎不起作用
2赞 Widor 11/3/2011 #2

处理这种情况的常用方法是将标记设置为有意义的内容。alt

如果你想要一个默认的图像,那么我建议使用服务器端技术来提供你的图像,使用类似的格式调用:

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

在代码中,捕获任何未找到文件的错误,并改为提供您的错误。ImageHandler.aspxdefault.jpg

0赞 Aziz Shaikh 11/3/2011 #3

尝试在标签中使用,使丑陋的方块消失。border=0img

<img src="someimage.png" border="0" alt="some alternate text" />

-34赞 David19801 11/3/2011 #4

解决方案 - 我删除了 img 的高度和宽度元素,然后替代文本起作用。

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

<img src="smiley.gif" alt="Smiley face" />

谢谢大家。

评论

25赞 Jean-Paul 5/29/2016
所以你给了自己“正确答案”,但你回答的答案与问题无关,GG WP。
2赞 Sudarshan Kalebere 12/11/2017
呵呵,这家伙从这些正确答案中接受了自己的答案,哈哈哈,好办法珍惜自己。
2赞 Ghilas BELHADJ 2/19/2019
这不是第一次:Dstackoverflow.com/a/12768098/1545917
2赞 Patrick Knott 3/9/2019
这个答案没有提供替代图像。
1赞 Satish Patro 5/6/2019
@david19801愿意解释吗?
368赞 Robby Shaw 11/3/2011 #5

解决问题的最佳方法:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror对你来说是一件好事:)

只需更改图像文件名并尝试一下即可。

评论

4赞 mlibby 11/6/2013
结合有用的 alt 标签,这是解决问题的好方法!
10赞 dehlen 7/7/2016
如果 Default.jpg 不可用,您最终将陷入无限循环。您应该添加一个检查if (this.src != 'Default.jpg')
10赞 Guillaume F. 11/14/2016
为了避免无限循环,并且比 if : 更好,如下@Sudarshan给出的。this.onerror=null;
1赞 Earlee 2/20/2020
任何使用 React 的人,你都可以参考这里 stackoverflow.com/questions/34097560/......
0赞 Kalpesh Dabhi 2/26/2020
谢谢,这将正常工作,我有一个问题,我可以为此为控制台错误做点什么。
37赞 Sudarshan Kalebere 6/1/2014 #6

好吧,你可以试试这个。

  <object data="URL_to_preferred_image.png" type="image/png">
   <img src="URL_to_fallback_image.png" />
  </object>

这对我有用。让我知道你。

评论

6赞 Evgeny 12/16/2014
似乎适用于所有主流浏览器。只需交换默认和原始。因此,该对象呈现原始图像,而 img 默认图像
0赞 TamusJRoyce 2/19/2021
在 IE11 中不受支持(适用于必须继续对 IE 进行 LTS 商业支持的用户)
0赞 ChrisFox 7/4/2021
对我不起作用。代码检查表明不能在<对象 /> 中包含 <img />。
1赞 openwonk 8/3/2021
认为你已经交换了来源。如果 attribute 是首选图像,并且 attribute 是默认图像路径,则它有效。objectdataimgsrc
14赞 Sudarshan Kalebere 8/12/2014 #7

好的,但我喜欢使用这种方式,这样每当原始图像不可用时,您都可以加载默认图像,这可能是您最喜欢的笑脸或说对不起的图像!不可用,但如果两个图像都丢失,您可以使用文本进行显示。在那里你也可以微笑。看一看几乎涵盖了所有案例。

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

评论

2赞 varela 9/7/2017
如果您希望搜索引擎正确解析页面,请不要将 alt 用于错误文本。搜索引擎可能会错误地索引您的内容数据。
0赞 Nico Haase 5/8/2018
该怎么办?为什么你会出人意料地添加一些服务器端和基于框架的代码?<?=base_url()?>
0赞 Sudarshan Kalebere 5/9/2018
@NicoHaase它的 URL 来自 PHP 框架,那么您可以随时为图像编写自己的 URL,我给出了一个示例,这并不意味着您应该复制和粘贴它或专注于该 URL,您包含您的网址。为了解释,你必须举例,所以我做到了。
0赞 Divyanshu Jimmy 3/18/2015 #8

我想隐藏标签占用的空间,所以这对我有用<img>

<img src = "source.jpg" alt = "" >

-1赞 Nasir Shafique 5/25/2015 #9

它对我有用,如果您不想在图像中断时使用 alt 属性,那么您可以使用这段代码并进行相应的设置。

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>
2赞 Patrick Koorevaar 3/12/2018 #10

我在图像周围添加了一个父 div,并使用以下 onerror 事件处理程序来隐藏原始图像,因为在 IE 中,使用 alt 属性后仍然显示一个丑陋的图像未找到图像:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>
0赞 stephen komu 4/12/2018 #11

如果你想要一个替代图像而不是文本,你也可以使用php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

评论

0赞 BritishSam 7/22/2022
你不知道他们是否在运行 PHP
-2赞 stephen komu 5/8/2018 #12

这个对我有用。使用 srcset.我刚刚了解了它,所以我不知道浏览器是否支持它,但它对我有用。试试吧,以后再把你的反馈给我。

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />
0赞 vikas dhere 11/27/2018 #13

处理此问题的简单方法,只需添加背景图像即可。

2赞 krishna amarghade 1/22/2019 #14

在这里检查下面的代码片段,其中,我拼错了图像名称。因此,正因为如此,它将替代图像显示为未找到的图像( 404.svg )。

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

评论

0赞 TamusJRoyce 2/19/2021
caniuse.com/mdn-html_elements_img_onerror,icanuse 将 onerror 列为“此功能已弃用/过时,不应使用”。 此外,IE11 不支持此功能(对于那些必须提供商业支持的人)
0赞 TamusJRoyce 2/19/2021
stackoverflow.com/a/59366589/458321 - 最佳做法是在脚本中设置它,而不是作为属性。该属性已弃用,而不是事件。
18赞 Bim 3/3/2020 #15

或者,如果图像不存在 - 什么都不显示。(我一直在找)

您可以将 Robby Shaw 在 “onerror” 属性中的答案中的函数交换为 “this.remove()”。

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

-2赞 SIAMWEBSITE 6/14/2020 #16

尝试PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}