如果html <img>的src属性无效，是否输入默认图像？

如果html 的src属性无效，是否输入默认图像？

HTML

村村

2020-04-03

<img>万一src属性无效（仅使用HTML），有什么方法可以在HTML 标签中呈现默认图像？如果没有，那么解决该问题的轻巧方式是什么？

第3887篇《如果html 的src属性无效，是否输入默认图像？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

理查德Tony 2020.04.03

我最近不得不构建一个回退系统，其中包括任意数量的回退图像。这是我使用简单的JavaScript函数完成的方法。

的HTML

<img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-fallIndex="1"
    data-fallback1="some_image.png"
    data-fallback2="some_image.jpg">

的JavaScript

function fallBackImg(elem){
    elem.onerror = null;
    let index = +elem.dataset.fallIndex;
    elem.src = elem.dataset[`fallback${index}`];
    index++;
    elem.dataset.fallbackindex = index;
}

我觉得这是处理许多后备图像的一种非常轻巧的方法。

伽罗理查德 2020.04.03

如果您已经创建了动态Web项目并将所需的图像放置在WebContent中，则可以通过在Spring MVC中使用下面提到的代码来访问该图像：

<img src="Refresh.png" alt="Refresh" height="50" width="50">

您还可以创建名为img的文件夹，并将图像放置在img文件夹中，并将该img文件夹放置在WebContent中，然后可以使用以下代码访问图像：

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">

蛋蛋L卡卡西 2020.04.03

Google将该页面添加到“ image fallback html”关键字，但是由于以上都不对我有帮助，并且我一直在寻找“对IE 9以下的svg fallback支持”，因此我一直进行搜索，结果是：

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

它可能是题外话，但它解决了我自己的问题，也可能对其他人有帮助。

神乐 2020.04.03

使用Jquery，您可以执行以下操作：

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});

猪猪 2020.04.03

仅限HTML的解决方案，唯一的要求是您知道要插入的图像的大小。由于它background-image用作填充图像，因此不适用于透明图像。

background-image如果给定的图像丢失，我们可以成功地用于链接显示的图像。唯一的问题是图标图像损坏了-我们可以通过插入一个很大的空字符来删除它，从而将内容推到的显示之外img。

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}

This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder

仅CSS解决方案（仅适用于Webkit）

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
}

This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder

Gil伽罗小宇宙 2020.04.03

<img style="background-image: url(image1), url(image2);"></img>

使用可添加多个图像的背景图像。我的情况是：image1是主图像，它将从某个位置（浏览器执行请求）获得。image2是在加载image1时显示的默认本地图像。如果image1返回任何类型的错误，则用户将看不到任何更改，这对于用户体验将是干净的

Mandy前端 2020.04.03

您要求提供仅HTML的解决方案...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>