动态更改图像源内部模态答案

【问题标题】：Change image source inner modal on the fly动态更改图像源内部模态
【发布时间】：2018-04-18 09:15:17
【问题描述】：

我正在尝试更改图像 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');
});

【问题讨论】：

标签： javascript html image modal-dialog on-the-fly

【解决方案1】：

使用：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：