是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?
当前回答
谷歌抛出了这个页面的“图像回退html”关键字,但因为上面没有帮助我,我正在寻找一个“svg回退支持IE低于9”,我继续搜索,这是我发现的:
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
这可能离题了,但它解决了我自己的问题,也可能帮助到其他人。
其他回答
使用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");
}
});
反应
<img
src="https://example.com/does_not_exist.png"
onError={(e) => {
e.currentTarget.src = "https://example.com/default.png"
}}
/>
谷歌抛出了这个页面的“图像回退html”关键字,但因为上面没有帮助我,我正在寻找一个“svg回退支持IE低于9”,我继续搜索,这是我发现的:
<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->
这可能离题了,但它解决了我自己的问题,也可能帮助到其他人。
对于任何图像,只需使用以下javascript代码:
if (ptImage.naturalWidth == 0)
ptImage.src = '../../../../icons/blank.png';
其中ptImage是由document.getElementById()获得的<img>标记地址。
如果你已经创建了动态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">