Question

我有一个简单的打字游戏（使用Phaser.io），我可以在带有布局（Razor）的MVC 5 View页面中从ASP.net MVC应用程序运行什么我添加了视图和控制器的 /Views/Home/About.cshtml

@{
    ViewBag.Title = "About";
}


<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>

<div id="game"></div>

游戏开始但没有显示任何图像。看起来对图像的引用是错误的。 http://asskicker3.azurewebsites.net/Home/About

我在 app.ts ：

中按如下方式引用图片

 preload() {
        this.game.load.image('background',"assets/background.jpg");

如果我将HTML页面添加到我的文件夹的根目录，那么一切都很完美。 http://asskicker3.azurewebsites.net/index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />


</head>
<body style="margin:0px; padding: 0px;">
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
    <div id="game"></div>

</body>

</html>

答案： James Skemp解决方案有效。只需添加/它就可以了。完美！

Answer 1

您的资产参考是相对的。

因此，如果您查看浏览器中的网络标签，您会注意到它正在尝试相对于网址加载图片。例如，http://asskicker3.azurewebsites.net/Home/assets/background.jpg

解决此问题的一种方法是更改preload，以便资产网址是绝对的而不是相对的。所以

this.game.load.image('background', "assets/background.jpg");

会变成

this.game.load.image('background', "/assets/background.jpg");

使用typescript和Phaser.io的Asp.net MVC应用程序不显示图像

1 个答案: