即时更改图像源内部模态

Question

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

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

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

我想问题的原因可以在我发布的 Javascript 代码中找到。尤其是两条指令的执行有点不同步。

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

The modal code:

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

And the JS code:

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

Answer 1

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

Answer 2

使用：

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

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

即时更改图像源内部模态

Change image source inner modal on the fly

html

javascript

image

modal-dialog

on-the-fly