Estoy tratando de insertar una URL dinámica dentro de un img src.
A continuación se muestra mi código HTML y Script. Al hacer clic en una pestaña, invoco un método GET HTTP, que responde con la URL de la imagen. Quiero usar esta URL de imagen con el campo img src.
código 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> ....Guion -
$("#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"); } }); });Ejemplo de respuesta JSON -
[ { "name":"John", "review":"awesome product", "img":"https://img.com/cats" }, { "name":"Shawn", "review":"good product", "img":"https://img.com/dogs" } ]acabo de reemplazar url con jsonplaceholder para probar
Además, la identificación debe ser única que no esté relacionada con su problema.
$.ajax({ url: "https://jsonplaceholder.typicode.com/photos", escriba: 'GET', éxito: función (datos) {
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"); }});
Use acentos graves ( ` ) en lugar de comillas simples ' o comillas dobles " . Los acentos graves admiten la interpolación de cadenas ${...} y multilínea :
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>`;EDITAR :
Como dijo @AmlKamel_, no puede tener la misma identificación varias veces en su documento. Al agregarle i , crea identificaciones únicas.