Django 在生产中找不到通过 CSS 文件链接的图像

Posted 2023-02-24

【中文标题】Django 在生产中找不到通过 CSS 文件链接的图像

【英文标题】：Django is not finding images linked via CSS file when in production

【发布时间】：2020-04-02 16:12:17

【问题描述】：

我已经通过 Digital Ocean 部署了一个 Django 2.2 项目，可以在 www.fancyfetish.co.uk 找到它

如果您访问该网站，它看起来很糟糕，缺少很多图片和样式。在开发中不是这种情况。当我使用 chrome 开发工具检查控制台时，在检索已从 CSS 文件调用的图像以及大量 CSS 样式时出现 404 错误。

从我的 CSS 文件中找到一个根本没有呈现的代码 sn-p：

.showcase 
  min-height: 40rem;
  position: relative;
  display: table;
  width: 100%;
  height: auto;
  padding-top: 15rem;
  padding-bottom: 10rem;
  background-image: url("/static/baseapp/img/fancy_fetish_showcase.png/");
  background-position: center 50px;
  background-repeat: no-repeat;
  background-size: cover; 
 

  .showcase h3 
    font-family: 'Cinzel', serif; 
  

  .showcase h1 
    font-family: 'Cinzel', serif; 
  

  .showcase a 
    font-family: 'Peddana', serif;
    font-size: 1.5rem; 
  

如本节所示，我清楚地将背景图像链接回图像文件夹。我指定的特定图像文件夹是我使用 collectstatic 时所有静态文件所在的文件夹。

404 错误说：

http://fancyfetish.co.uk/static/baseapp/css/fancy_fetish_showcase.png

所以它试图在 css 文件中找到 CSS 图像，但是它位于静态的 img 文件夹中。

这是我的 django 模板中的链接：

<link rel="stylesheet" type="text/css" href="% static 'baseapp/css/style.css' %">
<link rel="stylesheet" type="text/css" href="% static 'baseapp/css/bootstrap.css' %">

这是目录：

在应用程序内有一个购物车应用程序、一个用户应用程序、一个产品应用程序和一个基本应用程序，我在其中保留所有静态文件夹，并从其他应用程序链接回所有这些文件夹，因此我没有在每个应用程序中都有静态文件应用程序。

我的设置文件如下所示：

STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

STATICFILES_DIRS = [
    'apps/baseapp/static'
]

STATIC_URL = '/static/'

上面目录图中的主静态目录是 collectstatic 将所有内容移动到的地方，它看起来像这样：

在主目录中找到的媒体文件是通过数据库上传的图像所在的位置，如下所示在我的一个模型中：

class ToyProduct(models.Model):

    slug = models.SlugField(max_length=40)
    image = models.ImageField(upload_to='media')
    title = models.CharField(max_length=150)
    description = models.TextField()
    price = models.DecimalField(max_digits=5, decimal_places=2)
    stock_quantity = models.PositiveIntegerField()
    in_stock = models.BooleanField(default=True)
    category = models.CharField(choices=TOY_CATEGORY_CHOICES, max_length=2, default='FW')
    brand = models.CharField(choices=TOY_BRAND_CHOICES, max_length=2, default='NB')
    on_sale = models.BooleanField(default=False)

    def __str__(self):
        return self.title

我将我的 css 写入一个 SCSS 文件，然后 Koala 开发工具编译为 css，然后将其收集到静态文件夹中。

我很确定这是一件非常明显的事情，而且我对它的研究太过分了，或者我的设置中的静态文件有误。有人可以帮忙吗？

非常感谢！

卡莉

【问题讨论】：

您选择了哪个 Web 服务器，并且您是否已将其配置为提供静态文件？ Django 不仅仅像在开发中那样在生产环境中提供文件。

我正在通过数字海洋和 nginx 使用 Ubuntu，我认为 CSS 存在问题，因为其他静态文件和我的 bootstrap.css 文件似乎加载正常

如果我查看 'style.css' 文件，网址与您在此处显示的不同。这是background-image: url("fancy_fetish_showcase.png");。 css 文件中的 url 总是相对于 css 文件本身的位置。将其更改为url("../img/fancy_fetish_showcase.jpg")。

请注意，如果 baseapp 是您的 Django 应用程序之一，Django 已经在 baseapp/static/ 目录中查找文件，因此您无需将其添加到 STATICFILES_DIRS，如 @987654326 所述@

还要注意媒体文件被上传到MEDIA_ROOT（在你的设置中），所以如果MEDIA_ROOT是某个名为“媒体”的文件夹，你不应该upload_to='media'因为那会上传path/to/media/media 中的文件，即。两次“媒体”。

【参考方案1】：

我发现了这个问题，服务器正在通过 GIT 访问我的旧版本的 css 文件。我重新克隆到 repo，它更新到我最新的 CSS 工作版本，现在一切正常

【参考方案2】：

url() 在 css 文件中始终使用 相对于 css 文件本身位置的路径。

您的 style.css 文件包含 background-image: url("fancy_fetish_showcase.png");，因此您的浏览器将在与 css 文件 (/static/baseapp/css) 相同的文件夹中查找此文件。

您应该将其替换为 url("../img/fancy_fetish_showcase.jpg") 以使其在 /static/baseapp/img 中查找。