我提供一项服务，帮助用户查找图片的位置。我的问题是图片存储在另一个内部网站上，我的用户需要连接到它才能看到图片(有些人可能无法访问，因为我的服务提供了其他信息)。内置替换(IMG 的 alt 属性)没有提供足够的灵 active 来通知用户纠正措施
<div id=theDiv>
<img src='http\internalSite\'+this.name+'.jpg'
alt='Please connect to internalSite to see the picture '+this.name+'.jpg'>
</div>
我想改进替代文本，至少提供一个指向“internalSite”的链接(或者更好的是，也许可以在 iFrame 中加载连接页面...)。我发现这是不可能的，所以我会使用 IMG 的 onError 属性来替换我在 div 上的内容
但实际上，图片是通过脚本放在这里的，所以我觉得这有点傻，显然没有优化 我的脚本如何检测到图片之前不可用，以决定我做什么？
伪代码:
if (isURLavailble(path)){
loadPicture();
} else {
loadSomethingNiceToSayPicIsntAvailable() ;
}
是否可以定义一个工作函数(当然还有跨浏览器)来执行 isURLavailble(path); ？
最佳答案
您可以用登录链接替换所有损坏的图像(或其中的一部分):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<img src="doesnotexist">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// See also https://stackoverflow.com/a/34726863/100754
$( document ).ready( function () {
"use strict";
$('<a href="login">login here</a>').replaceAll($('img').filter( function () {
return !(this.complete && this.naturalHeight !== 0);
}));
});
</script>
</body>
</html>
另见 this answer至 Check if an image is loaded (no errors) in JavaScript .
或者，如果您在页面加载后设置图像，您可以这样做:
var img = new Image();
img.onload = function () {
$(img).appendTo('.image-container');
};
img.onerror = function () {
$('<a href="login">login here</a>').appendTo('.image-container');
};
img.src = 'doesnotexist';
关于javascript - 使用 JavaScript，如何用任何其他 HTML 数据替换损坏的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43740910/