提问人:David19801 提问时间:11/3/2011 最后编辑:PekkaDavid19801 更新时间:11/23/2021 访问量:253318
HTML 如果找不到图像
HTML if image is not found
问:
我在 HTML 页面中有一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
如果在服务器上找不到图像,则会显示一个丑陋的空白方块。
我想让它,如果找不到图像,它将不显示任何内容,或者我知道肯定在服务器上的其他默认图像。
这怎么能做到呢?
答:
您可以通过添加以下选项来显示替代文本: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
尝试在标签中使用,使丑陋的方块消失。border=0
img
<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
对你来说是一件好事:)
只需更改图像文件名并尝试一下即可。
评论
if (this.src != 'Default.jpg')
this.onerror=null;
好吧,你可以试试这个。
<object data="URL_to_preferred_image.png" type="image/png">
<img src="URL_to_fallback_image.png" />
</object>
这对我有用。让我知道你。
评论
object
data
img
src
好的,但我喜欢使用这种方式,这样每当原始图像不可用时,您都可以加载默认图像,这可能是您最喜欢的笑脸或说对不起的图像!不可用,但如果两个图像都丢失,您可以使用文本进行显示。在那里你也可以微笑。看一看几乎涵盖了所有案例。
<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';">
评论
<?=base_url()?>
我想隐藏标签占用的空间,所以这对我有用<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="">
评论
或者,如果图像不存在 - 什么都不显示。(我一直在找)
您可以将 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">
尝试PHP
if (file_exists('url/img/' . $Image)) {
$show_img_URL = "Image.jpg";
} else {
$show_img_URL = "Image_not_found.jpg";
}
评论