Question

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

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

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

我想这样做，如果找不到图像，它将不会显示任何内容或我知道肯定在服务器上的其他默认图像。

如何做到这一点？

Answer 1

解决问题的最佳方法：

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

onerror对你有好处：）

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

Answer 2

你可以试试这个。

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

这对我有用。让我了解你。

Answer 3

好的，但是我喜欢这样使用，所以每当原始图像不可用时，您可以加载您最喜欢的笑脸或图像，表示抱歉！不可用，但如果两个图像都丢失，您可以使用文本显示。那你也可以笑脸。看看几乎涵盖了每一个案例。

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

Answer 4

您可以添加alt

来显示替代文字

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

Answer 5

或者，如果图像不存在，则什么也不显示。（我在找什么）

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

Answer 6

处理此方案的常用方法是将alt标记设置为有意义的内容。

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

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

在ImageHandler.aspx代码中，抓住任何未找到文件的错误，并改为使用default.jpg。

Answer 7

我在图像周围添加了一个父div，并使用以下的onerror事件处理程序来隐藏原始图像，因为在IE中使用alt属性后仍然显示一个难看的图像未找到的图像：

User

Answer 8

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

Answer 9

尝试使用border=0标记中的img让丑陋的广场消失。

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

Answer 10

我想要隐藏<img>标记占用的空间，这样这对我有用

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

Answer 11

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

Answer 12

一种简单的处理方法，只需添加背景图片即可。

Answer 13

尝试PHP

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

Answer 14

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

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

Answer 15

这个对我有用。使用srcset。我刚刚了解了它，所以我不知道浏览器是否支持它，但它对我有用。试试吧，然后再给我反馈。

block

Answer 16

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

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

要

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

谢谢大家。

如果找不到图像，则为HTML

16 个答案: