CODEWITHSUNDEEP
cssdjangodjango-templatesdjango-staticfilesdjango-settings
CThomas
CThomas

Reputation: 199

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

I have deployed a Django 2.2 project via Digital Ocean and it can be found at www.fancyfetish.co.uk

If you visit the site it looks awful, with a lot of images and styling missing. This is not the case when in development. When I use chrome dev tools to inspect the console there are 404 errors when retrieving images that have been called from the CSS file, along with a lot of CSS styling.

Find here a code snippet from my CSS file that is not being rendered at all:

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

As shown in this section I clearly link the background-image back to the images folder. The particular images folder I am specifying is the one where all my static files go to when I use collectstatic.

The 404 error says:

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

So it is trying to find the CSS image within the css file, however it is located in the img folder within static.

Here is the link in my django template:

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

Here is the directory:

enter image description here

Within apps is a cart application, a user application, a products application and a baseapp where I keep all static folders, and link back to all of them from the other apps, so I don't have static files in every single app.

My settings files look like this:


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

STATICFILES_DIRS = [
    'apps/baseapp/static'
]

STATIC_URL = '/static/'

The main static directory in the directory image above is where collectstatic moves everything to, it looks like this:

enter image description here

enter image description here

enter image description here

The media file found within the main directory is where images uploaded via the database go, as shown here in one of my models:

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

I write my css in an SCSS file and Koala dev tool compiles to css which is then collected to the static folder.

I am pretty sure this is something very obvious and I am looking too far into it, or I have my static files in my settings wrong. Is anyone able to assist at all?

Most grateful regards!

Carlie

Upvotes: 0

Views: 123

Answers (2)

CThomas
CThomas

Reputation: 199

I discovered the issue, the server was accessing an old version of my css file through GIT. I recloned to repo and it updated to my latest working version of CSS and now all is working

Upvotes: 0

dirkgroten
dirkgroten

Reputation: 20682

url() in css files always uses a path relative to the location of the css file itself.

Your style.css file contains background-image: url("fancy_fetish_showcase.png"); so your browser is going to look for this file in the same folder as the css file (/static/baseapp/css).

You should replace this with url("../img/fancy_fetish_showcase.jpg") for it to look in /static/baseapp/img.

Upvotes: 1

Related Questions