Question

我在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 - http://localhost:59862/images/poker/poker-01.svg

Answer 1

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

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

是的，您可以使用Data URI scheme在CSS中推送您的图片，但我认为您现在不需要这样做。只需输入正确的URL即可。

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

1 个答案: