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

Question

我很抱歉，如果这个问题似乎有些混乱，但是我找不到更好的方法来表达它。我在网络开发方面不是很有经验，当我试图开发游戏时，我遇到了一个错误，我似乎无法解决。

我开始从前端开始开发，当我的游戏运行时，我试图移至后端，以便我可以实现排行榜和用户。我正在使用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时包括静态资产，请阅读文档以了解其工作原理。最好理解正在发生的事情，而不是粘贴到任何地方的文件之前。

通过使用启用发现器搜索文件。默认为 查看staticfiles_dirs和"静态"中定义的所有位置 已安装_Apps设置指定的应用程序目录。

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