Wie kann ich Bild durch Javascript ersetzen?

Question

Meine Ansicht wie folgt aus:

<li id="thumbnail-view" class="count-photo"> 
    <div class="thumbnail"> 
     <img src="{{ asset('img/thumbs/'.$photo) }}" alt=""> 
     <a href="javascript:" class="thumbnail-check"><span class="fa fa-check-circle"></span></a> 
     <ul class="list-inline list-edit"> 
      ... 
     </ul> 
    </div> 
</li> 

Meine Javascript wie folgt aus:

var photo = 'flower.jpg'; 
var res = `<img src="{{ asset('img/thumbs/'+photo) }}" alt="">` 
$('#thumbnail-view img').html(res); 

Wenn der JavaScript-Code ausgeführt, ich will

das Bild ändern

ich so versuchen, aber es tut nicht funktionieren

Wie kann ich es tun?

Answer 1

Sie nicht den inneren HTML eines Bildes einstellen, legen Sie die src-Eigenschaft.

$('#thumbnail-view img').prop("src", "{{ asset('img/thumbs/') }}"+photo); 

Nebenbei bemerkt: Wenn dies in einer JS-Datei ist dann Ihre Template-Engine wird wahrscheinlich nicht den Asset-Tag verarbeitet, so dass Sie den Pfad codieren müssen oder es aus anderen Ländern greifen.

$('#thumbnail-view img').prop("src", "/assets/img/thumbs/"+photo); 

Answer 2

einfache Weise

var photo = 'flower.jpg'; 
$('#thumbnail-view img').attr('src', photo); 

Answer 3

Sie sollten wie folgt verwenden: $('#thumbnail-view img').attr('src','path/to/photo');