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

Question

我有一个简单的 typescript 游戏（使用 Phaser.io），我要从 ASP.net MVC 应用程序中运行在具有布局（Razor）的 MVC 5 视图页面中做什么我添加了视图和控制器 /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

您的资产参考是相对的。

因此，如果您查看浏览器中的网络选项卡，您会注意到它正在尝试加载与 URL 相关的图形。例如，http://asskicker3.azurewebsites.net/Home/assets/background.jpg

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

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

会变成

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

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

Asp.net MVC application using typescript and Phaser.io does not show images

asp.net-mvc

typescript

phaser-framework