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 в место, где будут загружены ваши статические файлы.