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

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应该只从您的静态位置提供资产。因此，在这种情况下，您应该能够通过将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复制到您的静态文件将从其提供的位置。