找不到图片的HTML


96

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

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

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

我要这样做,以便如果找不到图像,它将什么也不显示,或者我知道肯定在服务器上的其他一些默认图像。

如何才能做到这一点?


2
我正在获取网站图标,某些网站没有。
David19801 2011年

在那种情况下,也许首先服务器端或客户端请求,看看返回什么状态码?
Pekka

我尝试不使用js,因为我不喜欢运行缓慢的网站,并且服务器端这样做的图标太多,这会导致服务器被禁止。
David19801 2011年

9
谁是告诉你javascript的白痴会使网站变慢?
2011年

@Pekka웃当然,您应该在网站上具有正常运行的链接。如果链接不在您自己的站点上,而是在别人的站点上,该怎么办?还是如果它们来自远程数据存储并花一些时间下载怎么办?
leetheguy

Answers:


265

解决问题的最佳方法:

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

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

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


4
结合有用的alt标签,这是解决问题的好方法!
mlibby

2
惊人!完美的解决方案
Emanuele Pavanello 2014年

5
如果Default.jpg不可用,您将陷入无限循环。您应该添加一张支票if (this.src != 'Default.jpg')
Dehlen '16

7
为了避免无限循环,它比this.onerror=null;@Sudarshan在下面提供的if:更好。
Guillaume F.

任何人只要有工作的反应,你可以参考这里stackoverflow.com/questions/34097560/...
Earlee

17

好吧,您可以尝试一下。

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

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


4
似乎可以在所有主要浏览器中使用。只需交换默认值和原始值即可。因此,该对象呈现原始图像和IMG默认一个
叶夫根

10

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

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

1
如果您希望搜索引擎正确地解析页面,请不要将alt用于错误文本。搜索引擎可能会错误地索引您的内容数据。
varela

怎么<?=base_url()?>办?为什么您惊讶地添加一些服务器端和基于框架的代码?
Nico Haase

@NicoHaase来自php框架的url,那么您总是可以为图像编写自己的url,我举了一个例子,这并不意味着您应该复制并粘贴或专注于该url,而是包括您的url。为了解释你必须举个例子,我做到了。
Sudarshan Kalebere '18年

3

在这里检查下面的代码片段,在这个代码片段中,我拼错了图像名称。因此,正因为如此,它会将替代图像显示为未找到图像(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="">


1

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

如果您要使用默认图像,则建议使用服务器端技术来提供图像,该技术使用类似于以下内容的格式调用:

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

ImageHandler.aspx代码中,捕获所有未找到的文件错误并为您服务default.jpg


1

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

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

也许这个方块来自包含您的img的div(或其他标签)
juankysmith

如果img显示样式为'block',则alt似乎不起作用
user3342930

1

我在图像周围添加了一个父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>

1

或者,如果图像不存在,则什么也不显示。(我在找什么)

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



0

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

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


0

如果您想要替代图像而不是文本,则可以使用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

试试PHP

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

-1

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

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

-2

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

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

-21

解决方案-我删除了img的height和width元素,然后替换文本起作用。

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

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

谢谢你们。


17
因此,您给自己提供了“正确答案”,但是您使用与问题GG WP不相关的答案进行了回答。
Jean-Paul

哦,这家伙从所有正确答案中都接受了自己的答案,哈哈哈,这是珍惜自己的好方法。
Sudarshan Kalebere


该答案没有提供其他图片。
Patrick Knott

@ david19801关心解释吗?
P Satish Patro
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.