blocks|key|524165|text|解决方案-我删除了img的height和width元素，然后alt文本就可以工作了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524166|<img+src="smiley.gif"+alt="Smiley+face"+width="32"+height="32"+/>|code-block|syntax|javascript|524167|至|524168|<img+src="smiley.gif"+alt="Smiley+face"+/>|524169|谢谢你们所有人。|524170|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Solution - I removed the height and width elements of the img and then the alt text worked.

<pre><code>&lt;img src="smiley.gif" alt="Smiley face" width="32" height="32" /&gt;
</code></pre>

TO

<pre><code>&lt;img src="smiley.gif" alt="Smiley face" /&gt;
</code></pre>

Thank you all.

blocks|key|740689|text|解决问题的最好方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740690|<img+id="currentPhoto"+src="SomeImage.jpg"+onerror="this.onerror=null;+this.src='Default.jpg'"+alt=""+width="100"+height="120">|code-block|syntax|javascript|740691|onerror对您来说是一件好事:)|offset|length|style|CODE|740692|只需更改图像文件名并自行尝试即可。|740693|entityMap^0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The best way to solve your problem:

<pre><code>&lt;img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120"&gt;
</code></pre>

<code>onerror</code> is a good thing for you :)

Just change the image file name and try yourself.

blocks|key|740740|text|嗯，你可以试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740741|++<object+data="URL_to_preferred_image.png"+type="image/png">
+++<img+src="URL_to_fallback_image.png"+/>
++</object>|code-block|syntax|javascript|740742|这对我很有效。让我了解你。|740743|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Well you can try this.
<pre><code> &lt;object data=&quot;URL_to_preferred_image.png&quot; type=&quot;image/png&quot;&gt;
 &lt;img src=&quot;URL_to_fallback_image.png&quot; /&gt;
 &lt;/object&gt;
</code></pre>
this worked for me. let me know about you.

blocks|key|740781|text|好的，但是我喜欢使用这种方式，这样当原始图像不可用时，您可以加载您的默认图像，这可能是您最喜欢的笑脸或说对不起的图像！不可用，但如果两个图像都丢失，您可以使用文本来显示。在那里你也可以微笑。看一下几乎涵盖了每一个案例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740782|<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';">|code-block|syntax|javascript|740783|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>&lt;img src="path_to_original_img/img.png" alt="Sorry! Image not available at this time" 
 onError="this.onerror=null;this.src='&lt;?=base_url()?&gt;assets1/img/default.jpg';"&gt;
</code></pre>

blocks|key|524754|text|对于另一种选择，如果图像不存在-什么也不显示。(我正在寻找的东西)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524755|您可以将"onerror“属性中Robby+Shaw的答案中的函数交换为"this.remove()”。|524756|​|524757|<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">|code-block|syntax|javascript|524758|524759|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

For the alternative, if the image doesn't exist - show nothing at all. (what I was looking for)

You can swap the function from Robby Shaw's answer in the "onerror" attribute to "this.remove()".

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120"&gt;
&lt;img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120"&gt;</code></pre>
</div>
</div>

blocks|key|524678|text|在这里检查下面的代码片段，在这里，我没有拼写图像名称。正因为如此，它将另一个图像显示为未找到的图像(+404.svg+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524679|<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="">|code-block|syntax|javascript|524680|​|524681|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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 ). 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&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;</code></pre>
</div>
</div>

blocks|key|524076|text|您可以通过添加alt来显示替代文本|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|524077|<img+src="my_img.png"+alt="alternative+text"+border="0"+/>+|code-block|syntax|javascript|524078|entityMap^0|7|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can show an alternative text by adding <code>alt</code>:

<pre><code>&lt;img src="my_img.png" alt="alternative text" border="0" /&gt; 
</code></pre>

blocks|key|740618|text|处理这种情况的通常方法是将alt标记设置为有意义的值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740619|如果你想要一个默认的图像，那么我建议使用一种服务器端技术来提供你的图像，称为使用类似的格式：|740620|<img+src="ImageHandler.aspx?Img=Blue.jpg"+alt="I+am+a+picture"+/>|code-block|syntax|javascript|740621|在ImageHandler.aspx代码中，捕获任何未找到文件的错误并提供您的default.jpg。|740622|entityMap^0|D|3|0|0|0|1|H|13|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

The usual way to handle this scenario is by setting the <code>alt</code> tag to something meaningful.

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:

<pre><code>&lt;img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" /&gt;
</code></pre>

In the <code>ImageHandler.aspx</code> code, catch any file-not-found errors and serve up your <code>default.jpg</code> instead.

blocks|key|524436|text|我在图像周围添加了一个父div，并使用下面的onerror事件处理程序来隐藏原始图像，因为在IE中，在使用alt属性之后，仍然会显示一个丑陋的image-not-found图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524437|<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>|code-block|syntax|javascript|524438|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>&lt;div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;"&gt;
 &lt;img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" /&gt;
&lt;/div&gt;
</code></pre>

blocks|key|524144|text|尝试在img标记中使用border=0使丑陋的正方形消失。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|524145|<img+src="someimage.png"+border="0"+alt="some+alternate+text"+/>|524146|entityMap^0|3|3|B|8|0|0|1S|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Try using <code>border=0</code> in the <code>img</code> tag to make the ugly square go away.

<code>&lt;img src="someimage.png" border="0" alt="some alternate text" /&gt;</code>

blocks|key|524332|text|我想隐藏<img>标签占用的空间，这样我就可以使用它了|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|524333|<img++src+=+"source.jpg"+alt+=+""+>|524334|entityMap^0|4|5|0|0|Z|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I wanted to hide the space occupied by <code>&lt;img&gt;</code> tag so this worked for me

<code>&lt;img src = "source.jpg" alt = "" &gt;</code>

blocks|key|524523|text|如果你想要一个替代图片而不是文本，你也可以使用php：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524524|$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";
}|code-block|syntax|javascript|524525|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want an alternative image instead of a text, you can as well use php:

<pre><code>$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
 echo "&lt;img src='".$file."' border="0" /&gt;";
}else if($alt_file){
 // the alternative file too might not exist not exist
 echo "&lt;img src='".$alt_file."' border="0" /&gt;";
}else{
 echo "smily face";
}
</code></pre>

blocks|key|741124|text|处理这个问题的简单方法，只需添加一个背景图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741125|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

simple way to handle this, just add an background image.

blocks|key|524367|text|对于我来说，如果你不想使用alt属性，如果图像中断，那么你可以使用这段代码并进行相应的设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524368|<h1>
++<a>+
+++<object+data="~/img/Logo.jpg"+type="image/png">
+++++Your+Custom+Text+Here
+++</object>
++</a>
</h1>|code-block|syntax|javascript|524369|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

its works for me that if you dont want to use alt attribute if image break then you can use this piece of code and set accordingly.

<pre><code>&lt;h1&gt;
 &lt;a&gt; 
 &lt;object data="~/img/Logo.jpg" type="image/png"&gt;
 Your Custom Text Here
 &lt;/object&gt;
 &lt;/a&gt;
&lt;/h1&gt;
</code></pre>

blocks|key|524784|text|尝试使用PHP|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524785|if+(file_exists('url/img/'+.+$Image))+{
++++$show_img_URL+=+"Image.jpg";
}+else+{
++++$show_img_URL+=+"Image_not_found.jpg";
}|code-block|syntax|javascript|524786|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try PHP

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

blocks|key|741095|text|这个对我很有效。使用srcset。我刚刚了解到它，所以我不知道浏览器是否支持它，但它对我来说是有效的。试试看，稍后再给我反馈。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741096|+<img+src="smiley.gif"+srcset="alternatve.gif"+width="32"+height="32"+/>|code-block|syntax|javascript|741097|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This one worked for me. using the srcset. I have just learnt about it so i dont know if browsers support it but it has worked for me. Try it and later give me your feed back.

<pre><code> &lt;img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" /&gt;
</code></pre>

I have an image in a HTML page:

<pre><code>&lt;img src="smiley.gif" alt="Smiley face" width="32" height="32" /&gt;
</code></pre>

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?

HTML if image is not found

服务器

我在一个HTML页面中有一张图片：<img src="smiley.gif" alt="Smiley face" width="32" height="32" />如果在服务器上找不到该图像，则会显示一个丑陋的空白正方形。我想让它这样，如果一个图像没有找到，它将显示什么也没有或一些其他默认图像，我知道肯定是在服务器上。如何做到这一点？

问如果未找到图像，则为HTML
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果未找到图像，则为HTMLEN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果未找到图像，则为HTML
EN