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

我甚至在很多地方粘贴了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只应该从您的静态位置提供资源。因此，在这种情况下，您应该能够通过将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和＆＃39;静态＆＃39;中定义的所有位置 INSTALLED_APPS设置指定的应用程序目录。

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

Pixi.js无法加载图片，因为Django＆＃34;无法找到它们＆＃34;

1 个答案: