时间戳

首页 > 解决方案 > 在动态创建的 img 元素上设置 img src

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

问题描述

我有一个通过 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 检测到了正确的事件。

策略二

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

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

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

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

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

标签： javascripthtmljquery

解决方案

问题是$(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>

推荐阅读