动态更改图像源内部模式

Question

我正在尝试更改图像HTML元素的源图像<img src="/some/dynamic/path"></img>。

我如何获取this.id非常复杂，超出了这个问题的上下文，但足以知道它是通过 PHP 获取的，并且在单击时，在列表项(此处未显示(上，标识符已经设置并可供使用。console.log确保这一点。

问题是，当我单击该元素时，模态出现在我面前，但我看不到图像。通过在浏览器上调试，我注意到src字段始终为空。

我想问题的原因可以在我发布的Javascript代码中找到。特别是，两条指令的执行在某种程度上是异步的。

对此，你怎么看？您需要更多详细信息吗？

---

模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="modalImage" src="">
            </div>
        </div>
    </div>
</div>

和JS代码：

$(".listShowCard").click(function() {
    console.log("/images/cards/"+this.id+".png");
    $("#modalImage").src="/images/cards/"+this.id+".png";
    $("#myModal").modal('show');
});

Answer 1

使用：

document.getElementById('modalImage').src=`/images/cards/${this.id}.png`;

当你使用带有ID的元素时，尽量避免jQuery，因为调用比纯JS调用慢得多。

Answer 2

 $("#modalImage").attr('src', "/images/cards/" + this.id + ".png")