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

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

当前回答

使用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");
    }
});

2009-06-11 12:57:01

其他回答

这对我来说很有效。也许你想用JQuery来挂钩事件。

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">

更新了jacquargs错误保护

更新:CSS唯一的解决方案我最近看到Vitaly Friedman演示了一个我不知道的很棒的CSS解决方案。其思想是将内容属性应用于破碎的图像。通常:after或:before不应用于图像，但当它们被破坏时，它们就会被应用。

<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
}
</style>

演示:https://jsfiddle.net/uz2gmh2k/2/

正如提琴所示，破碎的图像本身并没有被删除，但这可能会解决大多数情况下没有任何JS或CSS的问题。如果你需要在不同的位置应用不同的图像，只需用一个类进行区分:.my-special-case img:before{…

2009-06-11 13:06:19

在Spring in Action第三版中找到了这个解决方案。

<img src=“../资源/images/Image1.jpg”

更新: 这不是一个只有HTML的解决方案…Onerror是javascript

2012-10-29 09:35:58

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

使用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");
    }
});

2009-06-11 12:57:01

我添加加载="lazy"到img标签。在某些情况下，它是有效的。

2022-01-14 09:57:29

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

推荐文章

最新文章

标签