如何使用JavaScript为脚本内div包含的img标签动态赋值src URL

你只需要按照和name、review字段完全一致的字符串拼接规则，把data[i].img嵌入到src属性的位置即可，同时建议修正循环生成元素时固定id重复的问题，修改后的代码如下：

$("#login").on("click", function isValid() {
    $.ajax({
        url: "https://xyz.foo.net/super",
        type: 'GET',
        success: function(data) {
            var name = "";
            for(var i=0;i<data.length;i++){
                name += '<div class="tm-list-item">' +
                    // 直接拼接data[i].img到src属性中
                    '<img src="' + data[i].img + '" alt="Image" class="tm-list-item-img">' +  
                    '<div class="tm-black-bg tm-list-item-text">' +
                        '<h3 class="tm-list-item-name">' + data[i].name + '</h3>' +
                        '<p class="tm-list-item-description">' + data[i].review + '</p>' +       
                    '</div> ' +
                '</div>' 
            }
            // 直接用html方法赋值即可，不需要先清空再追加
            $("#name").html(name);
        },
        error: function(e) {
            alert("Refresh Page");
        }
    });
});

注意事项 #

• 拼接逻辑：外层HTML片段用单引号包裹，src属性用双引号包裹，动态值通过' + 变量 + '的格式嵌入即可，不需要额外转义
• 移除了重复的固定id：循环生成多个img元素如果使用相同id会导致DOM操作异常，如果你确实需要给img加id，可以拼接循环索引生成唯一标识，例如id="image' + i + '"
• 代码优化：$("#name").html(name)等价于先清空内容再追加，可省去单独清空的步骤

内容的提问来源于stack exchange，提问作者John Seen