使用 Javascript 在脚本中的 DIV 中的动态 Img Src URL答案

【问题标题】：Dynamic Img Src URL within a DIV within Script using Javascript使用 Javascript 在脚本中的 DIV 中的动态 Img Src URL
【发布时间】：2021-11-04 19:36:49
【问题描述】：

我正在尝试在 img src 中插入动态 url。

以下是我的 HTML 和脚本代码。 OnClick 一个选项卡，我正在调用一个 GET HTTP 方法，它以图像 url 响应。我想将此图像 url 与 img src 字段一起使用。

HTML 代码

        ....
        <li>
          <a href="#" class="tm-tab-link" data-id="hot" onclick="isValid();" id="login">Reviews</a>
        </li>
        ...
        <div id="hot" class="tm-tab-content">
          <div class="tm-list">
              <div class="features_items" id="name"></div>
          </div>
        </div>
        ....

脚本 -

$("#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-1;i++){
            name += '<div class="tm-list-item">' +
      
                // how to add the image url below DYNAMICALLY? 
                // how to insert data[i].img ?

              '<img src="??????????" id=image1 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>' 
            }
            
            $("#name").html("");
            $("#name").append(name);
        },
        error: function(e) {
            alert("Refresh Page");
        }
    });

});

示例 JSON 响应 -

[
 {
  "name":"John",
  "review":"awesome product",
  "img":"https://img.com/cats"
  },
  {
  "name":"Shawn",
  "review":"good product",
  "img":"https://img.com/dogs"
  }
]

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

我只是用 jsonplaceholder 替换 url 来测试

另外，id 必须是唯一的，与您的问题无关。

$.ajax({ url: "https://jsonplaceholder.typicode.com/photos", 类型：'GET'，成功：函数（数据）{

      console.log(data);

      for(var i=0;i<=data.length-1;i++){
      name += '<div class="tm-list-item">' +


        '<img src="'+data[i].url+'"   id="image' + i + '" 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>' 
      }

      $("#name").html("");
      $("#name").append(name);
  },
  error: function(e) {
      alert("Refresh Page");
  }

});

【讨论】：

很好的答案，以及对非唯一 ID 的良好观察。我冒昧地将您的代码变成了一个 sn-p，并通过将 $("#name").html(""); $("#name").append(name); 替换为 $("#name").html(name); 来稍微改进它

【解决方案2】：

使用反引号 ( ` ) 代替单引号 ' 或双引号 "。反引号支持字符串插值${...} 和多行：

name += `<div class="tm-list-item">
              <img src="${data[i].img}" id="image${i}" 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>`;

编辑：

正如@AmlKamel_ 所说，您不能在文档中多次使用相同的 ID。通过向其添加i，您可以创建唯一的 ID。

【讨论】：