如果找不到图像，则使用 HTML

我有一个 HTML 页面的图片:

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

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

我想让它这样，如果一个图像没有找到它将显示任何或其他一些默认的图像，我知道肯定是在服务器上。

这怎么可能呢？

226789 次浏览
小开

您可以通过添加 alt来显示备选案文:

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

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

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

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

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

小开

尝试在 img标签中使用 border=0来消除丑陋的正方形。

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

小开
最佳答案

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

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

致

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

谢谢大家。

小开

解决问题的最好方法:

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

onerror对你来说是件好事:)

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

小开

你可以试试这个。

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

这对我有用，让我知道你的事。

小开

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

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

我想隐藏的空间占用的 <img>标签，所以这为我工作

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

小开

对我来说，如果你不想使用 alt 属性，如果图像中断，那么你可以使用这段代码，并相应地设置。

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

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

如果你想要一个替代图片而不是文本，你也可以使用 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";
}
小开

这招对我很管用。使用 srcset。我刚刚了解到它，所以我不知道如果浏览器支持它，但它为我工作。试试看，然后把你的信号反馈给我。

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

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

小开

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

小开

另外，如果图像不存在，那么什么也不要显示

您可以将“ onerror”属性中 Robby Shaw 的答案中的函数交换为“ 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">

小开

试试 PHP

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

提交答案