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

Question

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

找到它

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

在这里找到我的 CSS 文件中根本没有呈现的代码片段：

.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; 
  }

这一段我清楚link把background-image放回images文件夹。我指定的特定图像文件夹是我使用 collectstatic 时所有静态文件所在的文件夹。

404 错误表示：

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

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

这是我的 django 模板中的 link：

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

目录如下：

在应用程序中有一个购物车应用程序、一个用户应用程序、一个产品应用程序和一个我保留所有静态文件夹的基础应用程序，link 从其他应用程序返回到所有这些应用程序，所以我不每个应用程序中都有静态文件。

我的设置文件如下所示：


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，然后将其收集到静态文件夹中。

我很确定这是非常明显的事情，我对它的研究太过深入，或者我的设置中的静态文件有误。有人能帮忙吗？

不胜感激！

卡莉

Answer 1

css 文件中的

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

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

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

Answer 2

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

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

Django is not finding images linked via CSS file when in production

css

django

django-templates

django-settings

django-staticfiles