使用Javascript动态更改图像src

时间:2014-03-31 01:09:36

标签: javascript html image onerror

如果/当加载页面时图片出现问题,我尝试更改某些src标记的img。我似乎特别从Internet Explorer 9中获得了一些随机行为。一些图像正确地显示了替换图像,一些图像上有红色十字。如果我在浏览器中调试,我告诉ImgError()没有定义。它在代码中明确定义,显然正在运行。为什么会这样?

<div class="PhotoBorder"><img alt="" onerror="imgError(this)" 
    src="./images/services/69_Staffmember.jpg" /></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
    </script>  

<script> 
$(window).load( function() {
    $('.RowWrapper').each(function() {
        var TotalWidth = 0;
        $(this).find('.StaffMember').each(function() {
            TotalWidth = TotalWidth + $(this).outerWidth(true);     
        });
        this.style.width = TotalWidth + "px";           
    });
});

function imgError(img)
{ 
    img.setAttribute("src","./images/services/49_ImgMissing.jpg");  
    img.removeAttribute("onerror");
}     

</script>

3 个答案:

答案 0 :(得分:1)

首先,如果您收到ImgError() is not defined错误,因为您的函数名称为imgError,而不是ImgError()

但是,如果那是你问题中的拼写错误,那么你可能会在某些时候得到错误imgError() is not defined,因为很可能是从缓存中请求了图像并且它的错误处理程序是即时启动的 - 即在解析文档的其余部分之前,意味着您的imgError函数尚未可用。要解决此问题,只需将imgError函数放在文档头部的脚本标记中即可。

答案 1 :(得分:0)

我代表RobG回答。 imgError()的定义低于我的代码中调用它的位置。您必须将代码定义放在您在html中调用的位置上方。否则,我发现你的结果可能是不确定的。

答案 2 :(得分:-1)

将您的图片元素设为ID并尝试此操作:

document.getElementById("imageid").src="./images/services/49_ImgMissing.jpg";