动态更改图像源内部模式

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

Answer 3

图像增强器的更完整示例。不在模态中，但它增强了图像的到位：

document.addEventListener("DOMContentLoaded", () => {

    const images = document.querySelectorAll("img");

    images.forEach(img => {

        const originalWidth = img.getAttribute("width");
        const originalHeight = img.getAttribute("height");
        const originalClass = img.getAttribute("class")

        img.addEventListener("click", () => {
            if (img.getAttribute("data-enhanced") === "true") {
                img.setAttribute("width", originalWidth);
                img.setAttribute("height", originalHeight);
                img.setAttribute("class", originalClass);
                img.removeAttribute("data-enhanced");
            } else {
                img.removeAttribute("width");
                img.removeAttribute("height");
                img.removeAttribute("class");
                img.setAttribute("data-enhanced", "true");
            }
        });
    });
});