Pixi.js 无法加载图像，因为 Django "can't find them"

Question

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

我从前端开始开发，当我有我的游戏时运行ning 我试图转移到后端，所以我可以实现排行榜和用户。我正在使用 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

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

├── 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 以了解其工作原理。最好了解正在发生的事情，而不是将文件粘贴到各处直到它起作用。

Files are searched by using the enabled finders. The default is to look in all locations defined in STATICFILES_DIRS and in the 'static' directory of apps specified by the INSTALLED_APPS setting.

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

Pixi.js 无法加载图像，因为 Django "can't find them"

Pixi.js can't load images because Django "can't find them"

javascript

django

pixi.js