Question

我一直在问，但我似乎没有得到任何答案。

如果其他图片失败，我想加载默认图片“/images2/no-avatar.png”。 img id将是“avatar”。

我有最新版本的jQuery，所以不会成为问题。

图像看起来像这样：

<img src="http://www.website.com/the-image.jpg" height="100" width="100" id="avatar" />

如果失败则看起来像这样

<img src="/images2/no-avatar.png" height="100" width="100" id="avatar" />

我一直试图找到这个问题一段时间没有答案，所以如果你帮助感谢先进。

Answer 1

您可以使用html和css。

执行此操作

<style>
    .img {
        width:100px;
        height:100px;
    }
    .img.placeholder {
        background-image:url('placeholder.jpg');
    }
</style>

<div class="placeholder img">
    <div class="img" style="background-image:url('image.jpg')"></div>
</div>

破损的图像不会显示，因为它是背景。

Answer 2

这可能对你有用。

jQuery(document).ready(function (){
    jQuery.fn.LoadImage = function(options) {
        var settings = jQuery.extend( {
            'defaultImage'         : '/image/notfound.png',
            'ImageToLoad'         : null
        }, options);

        return this.each(function() {
            var jthis = jQuery(this);
            if(settings.ImageToLoad == null) settings.ImageToLoad = jthis.attr("src");
            var img = new Image();
            jQuery(img)
            .load(function () {
               jthis.attr("src", settings.ImageToLoad);
            })
            .error(function () {
                jthis.attr("src", settings.defaultImage);
            })
            .attr('src', settings.ImageToLoad);
        });
    };
});

然后你可以像这样实现..

//Find all img src and show default if not found
jQuery("img").LoadDefault();

//Find all a certain ID and load a centain Image or default
jQuery("#imgObj").LoadDefault({defaultImage:"default.jpeg", ImageToLoad:"image.jpeg"});

以及问题的解决方案

   jQuery("#avatar").LoadDefault({defaultImage: "/images2/no-avatar.png" });

Answer 3

我正在使用一个只有CSS的方法，它工作正常。由于我的头像是固定大小并且驻留在DIV中，我只是将该div的背景设置为默认图片。当img加载它覆盖。但是，您不希望失败的图像位于顶部，因为它将具有[X]占位符。我会使用Ajax调用，如果失败，我会将图像的src设置为默认值，或者将类设置为no-avatar并使用CSS控制背景图像和尺寸。

http://api.jquery.com/jQuery.ajax/

Answer 4

这应该有效：

    <script>
            $('img').error( function() {
            $(this).attr('src', 'http://www.huntingdonarea.info/images/loading.gif');
            });
    </script>

希望它对你有所帮助。

如果其他失败，jQuery加载默认图像

4 个答案: