如果未找到图像，则为 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7995080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML if image is not found
提问by David19801
I have an image in a HTML page:
我在 HTML 页面中有一个图像：
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
If the image is not found on the server it shows an ugly blank square.
如果在服务器上找不到图像，它会显示一个丑陋的空白方块。
I want to make it so that if an image is not found it will display nothing or some other default image that I know is definitely on the server.
我想这样做，如果找不到图像，它将不显示任何内容或我知道服务器上肯定存在的其他一些默认图像。
How can this be done?
如何才能做到这一点？
采纳答案by David19801
Solution - I removed the height and width elements of the img and then the alt text worked.
解决方案 - 我删除了 img 的高度和宽度元素，然后替代文字起作用了。
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
TO
到
<img src="smiley.gif" alt="Smiley face" />
Thank you all.
谢谢你们。
回答by Robby Shaw
The best way to solve your problem:
解决您的问题的最佳方法：
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">
onerroris a good thing for you :)
onerror对你来说是件好事:)
Just change the image file name and try yourself.
只需更改图像文件名并尝试自己。
回答by Sudarshan Kalebere
Well you can try this.
那么你可以试试这个。
<object data="URL_TO_Default_img.png" type="image/png">
<img src="your_original_image.png" />
</object>
this worked for me. let me know about you.
这对我有用。让我知道你。
回答by Sudarshan Kalebere
Ok but I like to use this way, so that whenever original image is not available you can load your default image that may be your favorite smiley or image saying Sorry ! Not Available, But in case if both the images are missing you can use text to display. where you can also you smiley then. have a look almost covers every case.
好的，但我喜欢使用这种方式，这样每当原始图像不可用时，您可以加载默认图像，这可能是您最喜欢的笑脸或说对不起的图像！不可用，但如果两个图像都丢失，您可以使用文本显示。那里你也可以你笑脸然后。看看几乎涵盖了所有情况。
<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';">
回答by krishna amarghade
Here Check below code snippet which, In this, I miss-spelled the image name. So, just because of that it is showing the alternative image as not found image ( 404.svg ).
在这里检查下面的代码片段，在此，我拼错了图像名称。因此，正因为如此，它将替代图像显示为未找到的图像（ 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="">回答by Patrick Koorevaar
I added a parent div around the image and used the following onerror event handler to hide the original image because in IE there was still an ugly image-not-found image shown after using the alt attribute:
我在图像周围添加了一个父 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>
回答by juankysmith
You can show an alternative text by adding alt:
您可以通过添加alt以下内容来显示替代文本：
<img src="my_img.png" alt="alternative text" border="0" />
回答by Widor
The usual way to handle this scenario is by setting the alttag to something meaningful.
处理这种情况的通常方法是将alt标签设置为有意义的东西。
If you want a default image instead, then I suggest using a server-side technology to serve up your images, called using a similar format to:
如果你想要一个默认图像，那么我建议使用服务器端技术来提供你的图像，使用类似的格式调用：
<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />
In the ImageHandler.aspxcode, catch any file-not-found errors and serve up your default.jpginstead.
在ImageHandler.aspx代码中，捕获任何未找到文件的错误并提供您的default.jpg。
回答by Aziz Shaikh
Try using border=0in the imgtag to make the ugly square go away.
尝试border=0在img标签中使用使丑陋的方块消失。
<img src="someimage.png" border="0" alt="some alternate text" />
<img src="someimage.png" border="0" alt="some alternate text" />
回答by Divyanshu Jimmy
I wanted to hide the space occupied by <img>tag so this worked for me
我想隐藏<img>标签占用的空间，所以这对我有用
<img src = "source.jpg" alt = "" >
<img src = "source.jpg" alt = "" >
回答by stephen komu
If you want an alternative image instead of a text, you can as well use php:
如果您想要替代图像而不是文本，您也可以使用 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";
}
