使用 JavaScript，如何用任何其他 HTML 数据替换损坏的图像答案

【问题标题】：Using JavaScript, how can I replace broken images with any other HTML data使用 JavaScript，如何用任何其他 HTML 数据替换损坏的图像
【发布时间】：2017-05-04 18:39:06
【问题描述】：

我提供一项服务，帮助用户找到图片的位置。我的问题是图片存储在其他内部站点上，我的用户需要连接到它才能查看图片（有些可能无法访问，因为我的服务提供了其他信息）。内置替换（IMG 的 alt 属性）没有提供足够的灵活性来通知用户纠正措施

<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); 的工作函数（当然还有跨浏览器）？ ?

【问题讨论】：

这是一个非常模糊的问题 - 不完全确定您要使用 alt-text 实现什么目标。您可以对图片进行 HTTP 请求，以检测图片是否可加载，这是一个选项吗？它对您的问题有帮助吗？
这确实是一种可能性。我问是因为我以前不知道这个（我是自学的，我错过了很多基础知识），所以我将与其他答案一起测试它！关于我想要实现的目标，虽然我很清楚，但我试图放置的内容比使用 alt='' 所能做的更多，HTML 内容而不是纯文本
一种可能的解决方案是，如果用户未登录，则在内部站点上动态生成带有帮助文本的图像。这是图像托管网站告诉用户不要热链接他们的图像的方法。如果您的内部站点上有 PHP，那么使用 PHP 图像函数很容易做到这一点。
@SinanÜnür 你的想法似乎可行，但我有问题，稍后我会重新修改并告诉你是否可行
@KodosJohnson，我已经考虑过了，但是内部站点不再开发（仅维护，没有预算），并且没有解决方案这么快替换它

标签： javascript html css

【解决方案1】：

您可以用登录链接替换所有损坏的图像（或其中的一部分）：

<!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';

【讨论】：

谢谢，第二个解决方案正是我所需要的。图片在页面加载后根据用户的需求加载。我不得不找到一些技巧，因为如果加载、关闭并再次加载相同的图像，它就不起作用了，但你真的让我走上了正确的轨道！

【解决方案2】：

您可以使用 JQuery jqXHR 调用检查 url：

$.get("urlToCheck.com").done(function () {
  loadPicture();
}).fail(function () {
   loadSomethingNiceToSayPicIsntAvailable() ;
});

【讨论】：

它对我不起作用：我无法测试图片URL，它失败（XMLHttpRequest无法加载），并且该站点的页面无论如何都可用，连接与否跨度>
是的，正如我所说，图片的“XMLHttpRequest 无法加载”
是否是跨域请求：跨域？
有点，但是是的（people10.company.corp 和 people12.company.corp，不要问我为什么会有这个）
如果跨域请求 JQuery 得到 :: No ‘Access-Control-Allow-Origin’ 错误。检查youtube.com/watch?v=uDy_cvf4nDg