Pixi.js 无法加载图像，因为 Django “找不到它们”

Question

如果这个问题看起来有点令人困惑，我很抱歉，但我找不到更好的表达方式。 我在 Web 开发方面不是很有经验，并且在尝试开发游戏时遇到了一个似乎无法修复的错误。

我从前端开始开发，当我运行游戏时，我尝试转移到后端，这样我就可以实现排行榜和用户。 我正在使用 Pixi.js，一个帮助我开发游戏的 JavaScript 框架。我在游戏中使用了一些图像，Pixi 有一个加载器，它工作正常：

PIXI.loader
  .add([
    "images/quarter.png",
    "images/c_quarter.png",
    "images/clef.png",
    "images/heart.png"
  ])
  .on("progress", loadProgressHandler)
  .load(init);

当我搬到 Django 时，我不得不使用静态文件加载我的 javascript。但是，无法使用 Pixi 加载程序加载图像，并且我在开发者控制台中收到以下错误：

quarter.png:1 GET http://127.0.0.1:8000/game/images/quarter.png 404 (Not Found)

这就是我的服务器终端发生的事情：

Not Found: /game/images/quarter.png
[04/Dec/2016 13:38:49] "GET /game/images/quarter.png HTTP/1.1" 404 2146
Not Found: /game/images/c_quarter.png
Not Found: /game/images/heart.png
Not Found: /game/images/clef.png
[04/Dec/2016 13:38:49] "GET /game/images/c_quarter.png HTTP/1.1" 404 2152
[04/Dec/2016 13:38:49] "GET /game/images/clef.png HTTP/1.1" 404 2137
[04/Dec/2016 13:38:49] "GET /game/images/heart.png HTTP/1.1" 404 2140

我尝试使用静态文件加载它们：

PIXI.loader
  .add([
    "{% static 'images/quarter.png' %}",
    "{% static 'images/c_quarter.png' %}",
    "{% static 'images/clef.png' %}",
    "{% static 'images/heart.png' %}"
  ])
  .on("progress", loadProgressHandler)
  .load(init);

得到了错误：

c_quarter.png:1 GET http://127.0.0.1:8000/static/images/c_quarter.png 404 (Not Found)

在我的服务器终端中：

[04/Dec/2016 13:27:22] "GET /game/ HTTP/1.1" 200 10074
[04/Dec/2016 13:27:22] "GET /static/game/js/ajax.js HTTP/1.1" 304 0
[04/Dec/2016 13:27:22] "GET /static/game/js/pixi.min.js HTTP/1.1" 304 0
[04/Dec/2016 13:27:22] "GET /static/game/js/pixi.min.js.map HTTP/1.1" 404 1682
[04/Dec/2016 13:27:22] "GET /static/images/c_quarter.png HTTP/1.1" 404 1673
[04/Dec/2016 13:27:22] "GET /static/images/clef.png HTTP/1.1" 404 1658
[04/Dec/2016 13:27:22] "GET /static/images/heart.png HTTP/1.1" 404 1661
[04/Dec/2016 13:27:22] "GET /static/images/quarter.png HTTP/1.1" 404 1667

我什至在很多地方粘贴了 images 文件夹，以确保我提供了正确的路径：

├── game
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── admin.py
│   ├── admin.pyc
│   ├── apps.py
│   ├── apps.pyc
│   ├── game
│   │   └── images
│   │       ├── c_quarter.png
│   │       ├── clef.png
│   │       ├── heart.png
│   │       └── quarter.png
│   ├── images
│   │   ├── c_quarter.png
│   │   ├── clef.png
│   │   ├── heart.png
│   │   └── quarter.png
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── 0002_auto_20161204_1240.py
│   │   ├── 0002_auto_20161204_1240.pyc
│   │   ├── 0003_auto_20161204_1244.py
│   │   ├── 0003_auto_20161204_1244.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── static
│   │   └── game
│   │       ├── css
│   │       │   ├── bootstrap.css
│   │       │   ├── bootstrap.min.css
│   │       │   └── business-frontpage.css
│   │       ├── fonts
│   │       │   ├── glyphicons-halflings-regular.eot
│   │       │   ├── glyphicons-halflings-regular.svg
│   │       │   ├── glyphicons-halflings-regular.ttf
│   │       │   ├── glyphicons-halflings-regular.woff
│   │       │   └── glyphicons-halflings-regular.woff2
│   │       ├── images
│   │       │   ├── c_quarter.png
│   │       │   ├── clef.png
│   │       │   ├── heart.png
│   │       │   └── quarter.png
│   │       ├── imgs
│   │       │   └── main.jpg
│   │       └── js
│   │           ├── ajax.js
│   │           ├── bootstrap.js
│   │           ├── bootstrap.min.js
│   │           ├── game
│   │           │   └── images
│   │           │       ├── c_quarter.png
│   │           │       ├── clef.png
│   │           │       ├── heart.png
│   │           │       └── quarter.png
│   │           ├── game.js
│   │           ├── jquery.js
│   │           ├── pixi.min.js
│   │           └── static
│   │               └── game
│   │                   └── images
│   │                       ├── c_quarter.png
│   │                       ├── clef.png
│   │                       ├── heart.png
│   │                       └── quarter.png
│   ├── templates
│   │   └── game
│   │       ├── images
│   │       │   ├── c_quarter.png
│   │       │   ├── clef.png
│   │       │   ├── heart.png
│   │       │   └── quarter.png
│   │       └── index.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── manage.py

如果有人能指出我正确的方向并帮助我纠正这个新手错误，我将不胜感激。谢谢！

Answer 1

Django 应该只提供来自您的 static 位置的资产。所以在这种情况下，您应该可以通过在路径中添加game/ 来找到文件。

PIXI.loader
  .add([
    "{% static 'game/images/quarter.png' %}",
    "{% static 'game/images/c_quarter.png' %}",
    "{% static 'game/images/clef.png' %}",
    "{% static 'game/images/heart.png' %}"
  ])

为确保在您执行collectstatic 时包含您的静态资产，请阅读documentation 以了解其工作原理。最好了解正在发生的事情，而不是将文件粘贴到任何地方直到它起作用。

使用启用的查找器搜索文件。默认为 查看 STATICFILES_DIRS 和“静态”中定义的所有位置 由 INSTALLED_APPS 设置指定的应用目录。

因此，通常的做法是在每个包含静态资产的应用程序中都有一个static 文件夹。然后这些由 django 复制到将提供静态文件的位置。