jQuery append img src URL

Question

Ich habe ein Formular, wo ich img url einreichen muss. Nach dem Übermitteln sollte es als Bild in der Liste unterhalb des Formulars angehängt werden. Wie kann ein Bild-URL-Wert zur Liste hinzugefügt werden? Zur Zeit habe ich diesen Code, aber es does't Arbeit:

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 

     let postPic = $('#imgLink').val() 
     $('#imageList').append($('<li>' + '<img src=$("postPic")>' + '</li>')) 

    }); 
    }); 

Answer 1

Basierend auf dem Beispiel-Code sollte diese Arbeit ...

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 
    $('#imageList').append($('<li>' + '<img src="' + $('#imgLink').val() + '">' + '</li>')) 
    }); 
}); 

Answer 2

Sie haben bereits den Wert Ihres img src in die postPic bekommen var, dies ist eine Zeichenfolge, die nicht innerhalb des jQuery-Selektors sein muss. Dies sollte für Sie arbeiten:

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 

    let postPic = $('#imgLink').val() 
    $('#imageList').append($('<li>' + '<img src="' + postPic + '">' + '</li>')) 

    }); 
}); 

effektiv, Ihren Fehler versuchte ein HTML-Element mit einem Wähler zu wählen, den Wert von postPic statt Zuweisung des Wertes von postPic zum src des img-Element entspricht.

Answer 3

Ich habe diesen Code versucht und es funktioniert. Sie müssen nur postPic aufrufen, damit der Wert der eingegebenen URL im Formular der Quelle img angezeigt wird.

$(document).ready(function(){ 
    $('#imageListForm').submit(function(event){ 
    event.preventDefault(); 
     let postPic = $('#imgLink').val(); 
     $('#imageList').append($('<li>' + '<img src="'+postPic+'"' + '</li>')); 
    }); 
    }); 

Answer 4

Bitte bei aussehen:

$(document).ready(function(){ 
$('#imageListForm').submit(function(event){ 
event.preventDefault(); 

    let postPic = $('#imgLink').val() 
    $('#imageList').append("<li><img src='"+postPic+"'></li>"); 

}); 
});