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

Question

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

如果您访问该网站，它看起来糟透了，缺少很多图像和样式。开发中不是这种情况。当我使用chrome dev工具检查控制台时，从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; 
  }

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

404错误说：

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

因此，它试图在css文件中找到CSS图像，但是它位于static的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，然后将其收集到静态文件夹中。

我很确定这是很明显的事情，而且我想的太深了，否则我的静态文件设置错误。有没有人可以提供协助？

最感谢的问候！

卡莉

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文件的旧版本。我重新克隆回购协议，并将其更新为我最新的CSS版本，现在一切正常