输入一个默认的图像，在情况下src属性的html <img>是无效的?

是否有任何方法在HTML <img>标记中呈现默认图像，以防src属性无效(仅使用HTML)?如果不是，你会用什么轻量级的方式来解决这个问题?

当前回答

只有HTML的解决方案，其中唯一的要求是你知道你插入的图像的大小。将不工作于透明图像，因为它使用背景图像作为填充。

我们可以成功地使用background-image来链接给定图像缺失时出现的图像。然后唯一的问题是破碎的图标图像-我们可以通过插入一个非常大的空字符来删除它，从而将内容推到img的显示之外。

img { 背景图片:url(“http://placehold.it/200x200”); 溢出:隐藏; ｝ img:{之前内容:“”; 字体大小:1000 px; ｝这张图片缺失了: <img src="a.jpg" style="width: 200px;身高:200 px " / > < br / > 并且正在显示占位符

只有CSS的解决方案(只有Webkit)

img:{之前内容:“”; 字体大小:1000 px; 背景图片:url(“http://placehold.it/200x200”); 显示:块; 宽度:200 px; 身高:200 px; 位置:相对; z - index: 0; margin-bottom: -16 px; ｝这张照片就在那里: < img src = " http://placehold.it/100x100 " / > < br / > 这张图片缺失了: < img src = " a.jpg " / > < br / > 并且正在显示占位符

2016-03-23 16:23:06

其他回答

如果你正在使用Angular/jQuery，那么这可能会有帮助……

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

解释

假设该项目有一个属性url可能为空，当它是，那么图像将显示为破碎。这将触发onerror属性表达式的执行，如上所述。你需要像上面描述的那样重写src属性，但是你需要jQuery来访问你的altSrc。无法让它与普通JavaScript一起工作。

可能看起来有点俗气，但挽救了我的项目。

2014-09-06 01:01:00

简单的img-element不是很灵活，所以我将它与picture-element结合在一起。这样就不需要CSS了。当发生错误时，所有srcset都被设置为回退版本。断开的链接图像不显示。它不会加载不需要的图像版本。图片元素支持响应式设计，并为浏览器不支持的类型提供多种回退。

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

2017-03-10 11:17:43

使用背景图像，让您可以添加多个图像。我的情况: Image1是主图像，这将从某个地方获取(浏览器执行请求) Image2是加载image1时显示的默认本地图像。如果image1返回任何类型的错误，用户将看不到任何更改，这对于用户体验来说是干净的

2016-08-02 20:48:34

3个解决方案:

考虑以下html文件:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
   <title>Document</title>
</head>
<body>
   <img id="imageId">
   <script src="setimage.js"></script>
</body>
</html>

解决方案一: 在html的body标签中引用这段JS代码为 < script src = " setimage.js " > < /脚本> 并设置SRC路径，第一个是如果有错误，下一个是你希望第一次工作的路径:)

var img = document.getElementById("imageId")
       img.onerror = () => {
           img.src= "../error.png";
       }
       img.src= "../correct.webp.png";

解决方案二:

这个解决方案几乎是相同的，相反，您将调用方法，同样是在脚本标记的正文的末尾，但将在那里提供路径。

function setImageWithFallback(mainImgPath, secondaryImgPath) {
   var img = document.getElementById("imageId")
       img.onerror = () => {
           img.src= mainImgPath;
       }
       img.src= secondaryImgPath;
}

解决方案三: 如果它只是一张图片，这将是最简单的:)只是在img标签上设置onerror

<img id="imageId" src="../correct.webp.png" 
onerror="if (this.src != '../error.png') this.src = '../error.png';">

2021-08-13 22:55:08

更新:2022年(chrome仍然工作!!)

我最近不得不构建一个包括任意数量的备份映像的备份系统。下面是我如何使用一个简单的JavaScript函数做到这一点。

HTML

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

JavaScript

function fallBackImg(elem){
    elem.error = null;
    let index = elem.dataset.fallIndex || 1;
    elem.src = elem.dataset[`src-${index}`];
    elem.dataset.fallIndex = ++index;
}

我觉得这是处理许多备用图像的一种非常轻量级的方式。

如果你想要“HTML only”，那么这个

<img src="some_image.tiff"
    onerror="this.error = null;
        let i = this.dataset.i || 1;
        this.src = this.dataset[`src-${i}`];
        this.dataset.i = ++i;"
    data-src-1="some_image.png"
    data-src-2="another_image.jpg">

2020-01-02 21:33:28

输入一个默认的图像，在情况下src属性的html <img>是无效的?

推荐文章

最新文章

标签