有没有一种编程方式可以确定一个图片链接是不好的？

Question

有没有一种编程方式可以确定一个图片链接是不好的？

3

在我所工作的网站中，由于链接可能是坏掉或过期（或其他原因），图像并不总是显示。您可以在此处查看：为什么我的动态HTML似乎随机放置? 当出现这种情况时，我希望能够在应该显示图像的位置上显示“无法显示图像”的消息。是否有可能实现这一点？如果可以，需要两个步骤：

1) To be able to determine programmatically that the image is not being displayed
2) To replace it, in that case, with aforementioned message

也许可以使用类似于伪代码的方式表示（以下为示例）：

if (ImageMissing) {
    $('img').Attr('src', 'imageMissing.png');
}

更新

好的，代码应该是这样的：

function doSomething() {
    var htmlBuilder = '';
    $.getJSON('duckbills.json', function() {
        // each ...
        // process the json file, building dynamic html
        htmlBuilder += 'img="bla.png"...';

        $('img').error(function() {
             $(this).attr("src", "imageMissing.png");
        });
    }):
}):

这会导致每个添加的图片都附加了该错误处理程序，因此有N个事件处理程序绑定，每个图片一个？

还是应该这样：

function doSomething() {
    var htmlBuilder = '';
    $.getJSON('duckbills.json', function() {
        // each ...
        // process the json file, building dynamic html
        htmlBuilder += 'img="bla.png"...';
    }):
    $('img').error(function() {
         $(this).attr("src", "imageMissing.png");
    });
}):

更新2

这是我的代码，但它无法工作：

$.getJSON('Content/NBCCJr.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { 
            htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
                dataPoint.imgsrc + '\"' +
                dataPoint.imgalt + '></img></a>' +
                '<div id=\"prizeCategory\" class=\"category\">' +
                dataPoint.category +
                '</div><br/><cite id=\"prizeTitle\" >' +
                dataPoint.title +
                '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                dataPoint.author +
                '</div><br/>';
            if (dataPoint.kindle.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
            }
            if (dataPoint.hardbound.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
            }
            if (dataPoint.paperback.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    ' target=\"_blank\">Paperback</a></button>';
            }
            htmlBuilder += '</section>';                

        // Doesn't work
        $('img').error(function () {
            $(this).attr("src", "Content/NoImageAvailable.png");
        });
    }
}); //each

...and I don't know why...

- B. Clay Shannon-B. Crow Raven

这个图片是否位于确定其存在的代码所在的同一域上？ - Aaron J Spetner

请看：https://dev59.com/F3VC5IYBdhLWcg3wihqv - Felipe Oriani

请查看以下内容： https://dev59.com/tHVD5IYBdhLWcg3wGHeu - Vishnu Sureshkumar

使用网络爬虫遍历您的网站并通知您缺失的内容不是更好吗？由于永久删除而非暂时不可用，因此内容更有可能不存在。 - cimmanon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

当然，error() 方法就是一个例子：

$('img').error(function() {
    $(this).attr("src", "imageMissing.png");
});

错误事件会被发送到那些由文档引用并由浏览器加载的元素，例如图片。如果元素未能正确加载，则会调用该事件。