如果未找到图像，则为 HTML答案

【问题标题】：HTML if image is not found如果未找到图像，则为 HTML
【发布时间】：2011-12-21 03:48:36
【问题描述】：

我在 HTML 页面中有一张图片：

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

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

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

如何做到这一点？

【问题讨论】：

我得到了网站图标，有些网站没有。
在这种情况下，也许先做一个服务器端或客户端请求，看看返回什么状态码？
我正在尝试不使用 js，因为我不喜欢速度慢的网站，而且有太多的网站图标无法在服务器端进行，这会导致服务器被禁止。
谁是那个告诉你javascript会让网站变慢的白痴？？
@Pekka웃 当然，您应该在网站上有有效的链接。如果链接不在您自己的网站上，而是在其他人的网站上怎么办？或者如果它们来自远程数据存储并需要一段时间才能下载呢？

标签： html

【解决方案1】：

解决问题的最佳方法：

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

onerror 对你来说是件好事 :)

只需更改图像文件名并自己尝试。

【讨论】：

结合有用的alt标签，这是解决问题的好方法！
太棒了！完美解决方案
如果 Default.jpg 不可用，您将陷入无限循环。您应该添加支票if (this.src != 'Default.jpg')
为了避免无限循环并且比 if 更好：this.onerror=null; 如下由@Sudarshan 给出。
任何使用 react 的人，你可以参考这里stackoverflow.com/questions/34097560/…

【解决方案2】：

你可以试试这个。

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

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

【讨论】：

似乎适用于所有主要浏览器。只需交换默认值和原始值。这样该对象呈现原始图像和img默认一个
IE11 不支持（对于那些必须继续对 IE 进行 LTS 商业支持的人）
不适合我。代码检查表明您不能在中包含。
认为您交换了资源。如果object 属性data 是首选图像并且img 属性src 是默认图像路径，则它可以工作。

【解决方案3】：

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

<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';">

【讨论】：

如果您希望搜索引擎正确解析页面，请不要将 alt 用于错误文本。搜索引擎可能会错误地索引您的内容数据。
<?=base_url()?> 是做什么的？为什么会出人意料地添加一些服务器端和基于框架的代码？
@NicoHaase 它的 url 来自 php 框架，你总是可以为图像编写自己的 url，我举了一个例子，并不意味着你应该复制和粘贴它或专注于那个 url，你包括你的网址是什么意思。为了解释你必须举个例子，所以我做了。

【解决方案4】：

或者，如果图像不存在 - 什么也不显示。（我在找什么）

您可以将 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">

【讨论】：

【解决方案5】：

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

如果您想要一个默认图像，那么我建议使用服务器端技术来提供您的图像，使用类似于以下格式的调用：

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

在 ImageHandler.aspx 代码中，捕获任何未找到文件的错误并提供您的 default.jpg。

【讨论】：

【解决方案6】：

这里检查下面的代码 sn-p，其中，我拼错了图像名称。因此，正因为如此，它将替代图像显示为未找到的图像（ 404.svg ）。

&lt;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=""&gt;

【讨论】：

icanuse, caniuse.com/mdn-html_elements_img_onerror 将 onerror 列为“此功能已弃用/过时，不应使用。”以及 IE11 不支持此功能（对于那些必须提供商业支持的人）
stackoverflow.com/a/59366589/458321 - 最佳实践是在脚本中设置它，而不是作为属性。不推荐使用属性，而不是事件。

【解决方案7】：

您可以通过添加alt来显示替代文本：

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

【讨论】：

也许这个方块来自包含你的img的div（或其他标签）
如果 img 显示样式为“块”，alt 似乎不起作用

【解决方案8】：

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

<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>

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案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";
}

【讨论】：

【解决方案12】：

处理这个问题的简单方法，只需添加背景图像。

【讨论】：

【解决方案13】：

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

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

【讨论】：

【解决方案14】：

这个对我有用。使用 srcset。我刚刚了解它，所以我不知道浏览器是否支持它，但它对我有用。试试看，稍后再给我反馈。

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

【讨论】：

【解决方案15】：

试试 PHP

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

【讨论】：

【解决方案16】：

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

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

到

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

谢谢大家。

【讨论】：

所以你给了自己“正确答案”，但你回答的答案与问题无关，GG WP。
哦，这家伙在所有正确的答案中都接受了自己的答案哈哈哈，珍惜自己的好方法。
不是第一次了 :D stackoverflow.com/a/12768098/1545917
这个答案没有提供替代图片。
@david19801 需要解释一下吗？