django 加载静态图片失败

django failed to load static image

我在 pythonanywhere 上托管了我的 django 应用程序。我正在使用 weasyprint 生成 pdf,并且我的 pdf 中要显示一张图片。错误日志中的错误是 "Failed to load image at /static/images/logo.png"。当我尝试打开与 url 相同的路径时,它会在浏览器中显示图像。这意味着它的路径是正确的,但其他地方是错误的。

我将我的静态目录放在应用程序之外。并将此路径添加到设置文件中。

我的文件夹结构:

     my_app
     static
        |__ css
        |__ images
              |__ logo.png
        |__ js
     templates
        |__ my_app
              |__ pdf.html

settings.py:

STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS =[
    STATIC_DIR,
]

pdf.html:

{% load static %}
<td><img class="my_logo" src="{% static 'images/logo.png' %}" alt="Temporarily Unavailable"></td>

假设您显示的文件夹结构是您在开发机器上使用的并且反映了您的实际代码存储库。

您的设置正确:

  • STATICFILES_DIRS 列出放置静态文件的目录(在应用程序之外)
  • STATIC_URL是用来给静态位置加上前缀的url,告诉服务器"any url that starts with this, you need to go fetch a static file".

缺少的是:

  • STATIC_ROOT: collectstatic 应该将静态文件复制到哪里?这通常是项目存储库之外的位置,有时甚至在完全不同的机器上,您的 Web 服务器将从中提供静态文件。在简单的部署中,可以是一个和你项目同级的/static目录:
/home/myusername/my_project_www/
     |_ my_project/   <-- BASE_DIR (this is a git clone of your code)
          |_ my_project
                |_ settings.py
                |_ urls.py
          |_ app/
              |_ views.py
              |_ static/  <-- automatically used as source by Django
          |_ manage.py
          |_ static/  <-- added to STATICFILES_DIRS
          |_ ...
     |_ static/  <-- STATIC_ROOT all files will be copied and served from here
     |_ media/  <-- MEDIA_ROOT if users can upload files

在上面的示例中,您将设置 STATIC_ROOT = os.path.abspath(os.path.join(os.path.dirname(BASE_DIR), 'static'))(BASE_DIR 之上的一个目录)。

  • 然后你需要运行manage.py collectstatic这样所有的静态文件都复制到那个目录下

  • 最后在 pythonanywhere 控制台中,在 Static Files 部分中,您必须映射 /static/ urlSTATIC_ROOT 的位置,即 /home/username/my_project_www/static/ for path。 (或者,如果您 运行 使用自己的服务器,则需要在 nginx 或 apache 配置中进行配置)。

我已经写了一篇关于这个的 blog post

您是要制作 pdf 供用户下载,还是要显示 html 文件?

如果您正在使用 weasyprint 生成 pdf,则 weasyprint 将不会尝试访问 http://yourwebsite/static/images/logo.png 来获取要放入 pdf 的徽标。相反,它将尝试访问位于 /static/images/logo.png.

的服务器上的文件

如果您想做的只是在您的 pdf 中包含徽标,您应该让 weasyprint 说放入来自 /home/username/path/to/your/logo/file.png 的徽标。