Question

我正在使用以下代码更改图像的来源：

var src = "/Content/Productimg/" + data.image +".jpg";
              $("#image").attr("src", src);

但是，有时如果data.img返回test并且Productimg文件夹中不存在test.jpg，则会显示一个有趣的图标。

有没有办法在分配src之前检查图像是否存在？

Answer 1

要检查图像是否存在，您可以执行以下操作：

$.ajax({
    url:'http://yourhost/someimage.ext',
    type:'HEAD',
    error: function()
    {
        //file does not exist
    },
    success: function()
    {
        //file exists do something here
    }
});

Answer 2

$("#image").bind("error", function () {
    $(this).remove();
}).prop("src", src);

如果这导致错误（如在javascript错误中）升级你的jQuery或使用有罪的：

$("#image").bind("error", function () {
    $(this).remove();
}).attr("src", src);

Answer 3

有一种方法可以处理IMG标签上的错误。像这样：

<img src="image.png" OnError="this.src='';"/>

Answer 4

您可以检查ajax请求中的状态代码

$.ajax({
    url: '...',
    statusCode: {
        404: function() {
            alert('not found');
        }
    }
});

Answer 5

在启动js脚本之前检查您的图像是否存在，如下所示：

<强>更新：

假设data.image已经来自这种类型的json回应。

在发送图像之前检查图像是否存在，if( !file_exists('image.jpg') { $data = array('images' => 'false', 'foo' => 'bar', ... ) }

然后在$.ajax();调用内部检查data.image != 'false'

Answer 6

如果您创建了一个javascript变量var image = new Image();，则可以在其上附加onload或onerror事件处理程序。在更改之前，您将能够判断您正在更改的图像是否无效。

function ChangeImage() {

    var image= new Image();
    image.onload = function() {
        alert('loaded');
    };
    image.onerror = function() {
        alert('error loading');
    };
    image.src = "http://BrokenPath/Sterling.jpg"
}

See this fiddle example

Answer 7

您可以将处理程序附加到onerror事件

jquery检查文件夹中是否存在图像

7 个答案: