django 加载静态图片失败

Question

我的 django 应用程序托管在 pythonanywhere 上。我正在使用 weasyprint 生成一个 pdf，并且在我的 pdf 中显示了一个图像。错误日志中的错误是“无法在 /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>

Answer 1

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

你的设置是正确的：

• STATICFILES_DIRS 列出了您放置静态文件的目录（在应用程序之外）
• STATIC_URL 是用来给静态位置加前缀的url，告诉服务器“任何以此开头的url，你都需要去获取一个静态文件”。

缺少的是：

• 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/ url 映射到 STATIC_ROOT 的位置，即/home/username/my_project_www/static/ 代表路径。 （或者，如果您正在运行自己的服务器，则需要在您的 nginx 或 apache 配置中进行配置）。

我已经为此写了blog post。

Answer 2

您是要制作一个 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 的徽标。