在动态创建的 img 元素上设置 img src

Question

我有一个通过 Ajax 调用动态创建的缩略图元素。 ID 和 url 也是动态的。

<img class="tn" id="'+id+'" src="'+d.aUrl+'" />

我想做的就是检测加载错误并提供不同的图像。

策略一

检测加载错误并设置源

$(document).on('error', '.tn', function(e){
 $(e.currentTarget.id).attr('src', 'alt_pic.jpg');
 });
  

这里的问题是未检测到错误事件。 当我将 'error' 替换为 'mouseover' 时，我可以看到为正确的 id 检测到了正确的事件。

策略二

从图像标签中检测错误事件，然后触发 function 进行处理。

<img class="tn" id="'+id+'" src="'+d.aUrl+'" onerror="replace_image(this)" />

function replace_image(t){
 $(t.id).attr("src", "alt_pic.jpg");
});

使用 id 调用错误寄存器和 function。 这不起作用，因为图像标签是动态创建的，并且在 dom 中不可用。

任何想法如何定位图像标签？ 谢谢！！

Answer 1

问题是$(t.id)评估为$('tn') ，而您想要的是$('#tn')或$(obj) 。 将您的代码修改为以下任一变体：

 // replace with alt image function replace_image(t){ $(t).attr("src", "https://i.stack.imgur.com/ffjPe.png"); // $('#' + t.id) will also work }; // dynamically insert image $('div').html('<img id="tn" src="test.jpg" onerror="replace_image(this)" />');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div>