如何用javascript替换图片？

Question

我的看法是这样的：

<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>

我的JavaScript是这样的：

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

如果执行了javascript代码，我想更改图像

我尝试那样，但不起作用

我该怎么做？

Answer 1

简单的方法

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

Answer 2

不要设置图像的内部HTML，请设置其src属性。

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

旁注：如果此文件位于.js文件中，则您的模板引擎可能不会处理资产标签，因此您需要对路径进行硬编码或从其他地方获取它。

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

Answer 3

您应该这样使用： $('#thumbnail-view img').attr('src','path/to/photo');