在不返回服务器的情况下动态加载图像的最佳方法是什么？答案

【问题标题】：What is the best way to load an image dynamically without going back to the server?在不返回服务器的情况下动态加载图像的最佳方法是什么？
【发布时间】：2017-08-02 06:58:35
【问题描述】：

我有一个用 ASP-MVC 构建的非常简单的纸牌游戏。

游戏的一个元素是能够从一副 52 张牌中随机挑选一张牌。

我有 52 个代表牌组的 svg 和一些生成随机数的 JavaScript。

我希望当用户点击牌组时，屏幕上某处会弹出一张随机卡片。

到目前为止的代码：

<div>
    <img src="~/images/poker/poker-deck.svg" onclick="pickCard()" />
</div>
<div>
    <img id="imgCard" alt="" />
</div>

<script type="text/javascript">

    function pickCard() {

        document.getElementById("imgCard").src = "images/poker/poker-" +   Math.floor(Math.random() * 52) + 1 + ".svg";
    }  

</script>

不幸的是，此时发生的所有事情都是显示损坏的图像图标。

我假设图像仍在服务器上，浏览器无法使用，因此我得到了损坏的链接。

如果我能帮上忙，我不想回到服务器。我正在考虑的一件事是将所有 52 张卡片加载到页面中，并根据需要使用 CSS 隐藏和显示。

是否有更好/更简单的方法来实现相同的结果？

附加信息：

来自 DevTools 的错误：404 Not Found - http://localhost:59862/images/poker/poker-01.svg

【问题讨论】：

最终归结为人为错误。图片被命名为：poker-1.svg 而不是 poker-01.svg

标签： javascript html css asp.net-mvc

【解决方案1】：

我认为你的诊断是错误的。我认为您的问题的原因是您使用~（波浪号）作为路径的一部分。这不是 HTML 标准的一部分，这是 IIS/ASP.NET（和其他一些 Web 服务器）支持的东西。对于浏览器，您实际上应该输入绝对或相对 URL。

要检查我是否正确，只需在现代浏览器中打开您的页面，打开“开发工具”并查看网络请求图像。我希望您收到 HTTP 错误 404（未找到），因此“显示损坏的图像图标”。只需查看浏览器实际尝试为图片打开的 URL。

是的，您可以使用Data URI scheme 将图像推送到 CSS 中，但我认为您现在并不真正需要它。只需输入正确的 URL，它应该可以工作。

【讨论】：

感谢您的回复。波浪号是个好地方，我认为你说对了一半。因此，我只是在 chrome 中运行了该站点，得到了 404，但是即使我更正了路径，对于尚未在页面上加载的任何资源，图像仍然没有返回。例如，我现在可以让 JavaScript 返回卡片组，但不能返回服务器上的其他图像。在开发工具中查看源>图像时，只有纸牌的图像可用。
@Freddie2025，我不确定我是否理解您的新问题。浏览器默认是惰性的，在需要之前不会获取资源（但您可以并且应该配置缓存以避免在每个页面重新加载时重新下载）。那么有什么不符合您的预期呢？那些“其他图像”是什么以及“您无法让 JavaScript 返回其他图像”究竟是什么？
我认为你已经以某种方式解决了这个问题。我需要做的是加载/缓存我的资源。你给我的数据 URI 方案的链接是我可以实现的方式吗？
@Freddie2025 当您避免说明您的实际问题是什么而仅仅询问您的部分解决方案时，很难给出合理的建议。是的，您可以使用data URI 方案将所有图像放入 CSS 甚至 HTML。这是一个好主意还是坏主意取决于很多细节。
所以其他图片是一副牌中的 52 张扑克牌，目前在网站的任何地方都没有引用。它们仅存在于服务器上的图像文件夹中。我希望能够访问这些图像，因此当我使用 JavaScript 进行调用时，它们会出现在页面上。我的一个解决方案是在网页中嵌入所有 52 张图片，并使用 CSS 隐藏或显示它们。然后我问是否有替代\更好的解决方案。我很欣赏“更好”是主观的。我真的在寻找标准\最佳实践。如果有许多不同的方法，我想听听它们，以便我决定最佳方法。