相关疑难解决方法(0)

使用php从数据库中获取100张照片网址并在页面上显示,但有些照片可能不再存在.如果照片网址失败(404)我想使用jquery来隐藏图像,并且不想显示任何错误图片.这是我的代码,但它不起作用.

HTML

<div id=test>
    <img src="http://test.com/test1.jpg" />
    <img src=" http://test.com/test2.jpg" />
    <img src="http://test.com/test3.jpg" />
</div>

jQuery的

var pic_list = jQuery("#test img");

pic_list.load(function () {
    var http = new XMLHttpRequest();
    http.open('HEAD', pic_list, false);
    http.send();
    if (http.status == 404) {
        pic_list.hide();
    } else {
        pic_list.show();
    }
});

我有一些从异地加载的图像,无法控制它们的可用性.我发现在负载很重的情况下,它们有时无法加载,但在快速刷新时它们会显示出来.

有没有办法检测图像是否加载失败然后如果是这样,在img src上重新加载直到它加载？如果是这样,你能举个例子吗？

我正在从服务器加载图像,当存在404时返回图像.也就是说,如果我加载的图像不存在,服务器将返回404响应,其中200x200 PNG后备图像显示"照片不是可用"就可以了.

我想检测这种情况发生在客户端的时间.我尝试了这个onerror属性:

<img src="http://example.com/photo.jpg" onerror="console.log(this)" />

此代码仅在服务器的404响应完全没有图像时有效.由于我的404响应,onerror事件永远不会被触发.

有没有解决这个问题的方法,没有用JavaScript预加载图像？

我有类似的东西:

document.getElementById('MyPicture').src = 'attempted.png';

如果客户端无法获取该资源,我想将其替换为:

document.getElementById('MyPicture').src = 'error.png'

我知道我可以在image标签中放置onError = function(),但是如何将Id传递给onError,这样我就可以有一个onError函数可以改变任何坏图片的src？

我有内容与破碎的图像,每页中的多个图像.一些图像具有空的src值,而一些图像只有404个链接.

我一直在尝试使用

<script type="text/javascript">
$(document).ready(function () {
    $("img").error(function(){
    $(this).hide();
    });
}); 
</script>

它没有按预期工作,在IE中不起作用,在chrome中我必须在第一次加载后重新加载页面以隐藏图像.谷歌搜索了很多,但所有其他代码是相同的.

编辑<img>标签对我来说不是一个选择.

这段代码出了什么问题？

我需要能够检测图像是否被破坏,并在图像链接断开时替换为默认图像.我知道我可以使用图像代理执行此操作,但希望能够使用javascript动态执行此操作.

我在myasp.net MVC Web应用程序中有以下代码: -

 <a href="~/Content/uploads/@(item.ID).png"><img class="thumbnailimag" src="~/Content/uploads/@(item.ID).png"  /></a>   @Html.ActionLink(item.Name,"Details","DataCenter", new{id = item.ID},null)

以下CSS:

.thumbnailimag {
    width:30px;
    height:30px;
    border:thin blue;
    background-image:url("/Content/uploads/virtual-data-center.jpg");
}

但如果图像不存在,每个bowser将以不同的方式对待它.我设置了一个背景图像,但仍然在IE上它将在默认图像上显示"X",如下所示: -

如果src不存在,是否有人可以建议显示默认图像？

可能重复:
jQuery/Javascript替换损坏的图像

这应该很容易我只是不知道用谷歌搜索的术语.我认为这是HTML/CSS,如果图像链接被破坏,它通常会显示缺少的图像图标,显示带有红色,绿色,蓝色形状的页面.在HTML中,是否可以配置"如果图像链接断开则使用此图像？"

我动态构建的一些img元素可能(do)失败.对于这些情况,我从这里得到了一些代码:有没有办法以编程方式确定图像链接是坏的？即:

    function getNatlBookCritics() {
        var htmlBuilder = '';

        // Doesn't do diddly-squat - wrong spot for it?
        $('img').error(function () {
            $(this).attr("src", "Content/NoImageAvailable.png");
        });

        $.getJSON('Content/NBCCJr.json', function (data) {
            $.each(data, function (i, dataPoint) {
    . . .

......但它不起作用.Warum nicht？

UPDATE

将此代码放在$ .getJSON()调用的.each部分中:

var jObject = $('<img src=\"' + dataPoint.imghref + '\"/>');
$(jObject).error(function () {
    $(this).attr("src", "Content/NoImageAvailable.jpg");
});

...... 所有图像都失败了.dataPoint.imghref包含以下值:

http://www.amazon.com/exec/obidos/ASIN/B00655KLOY/garrphotgall-20

更新2

在一个坚果地狱,我正在添加"img src",如下所示:

function getNatlBookCritics() {
    var htmlBuilder = '';
    $.getJSON('Content/nbcc.json', function (data) {
        $.each(data, function (i, dataPoint) { …

我似乎无法解决这个问题.我正在尝试做的是让React尝试验证图像没有返回404以显示替代图像.像下面这样的东西不起作用,因为React不会等待图像尝试加载以返回组件.

getInitialState: function () {
        var img = new Image();
        img.onerror = function() {
            img.src = "alternativeImage.jpg"
        },
        img.src = this.props.image;
        return {image: <img src={img.src} />};
    },

上面的代码将显示图像,但404替代图像不会显示.

我试图把它放在getInitialState之外的另一个方法中.我也尝试让它在React组件之外调用外部方法,但没有任何作用.

有一种在图像标签本身上添加onerror属性的简易方法,但似乎React具有不执行该代码和/或根据结果更新自身的相同问题.

我认为最令人沮丧的部分是我似乎无法使用任何调用React能够使用JavaScript图像对象的函数.

感谢您的任何帮助,您可以提供.