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

Question

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:

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:

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

Which web server did you choose and have you configured it to serve static files? Django doesn’t just serve the files in production the same way it does in development. — Matthew Gaiser
– Matthew Gaiser, Commented Dec 9, 2019 at 14:29
I am using Ubuntu through digital ocean, with nginx, and I assumed there was an issue with CSS only as other static files and my bootstrap.css files seem to have loaded fine — CThomas
– CThomas, Commented Dec 9, 2019 at 15:24
If I look at the 'style.css' files, the url is not as you show here. It's background-image: url("fancy_fetish_showcase.png");. urls in css files are always relative to the location of the css file itself. Change it to url("../img/fancy_fetish_showcase.jpg"). — dirkgroten
– dirkgroten, Commented Dec 9, 2019 at 15:36
Note that if baseapp is one of your Django apps, Django already looks for files inside the baseapp/static/ directory so you don't need to add it to STATICFILES_DIRS, as explained here — dirkgroten
– dirkgroten, Commented Dec 9, 2019 at 15:40
Also note that media files are uploaded to MEDIA_ROOT (in your settings), so if MEDIA_ROOT is a folder called "media" somewhere, you shouldn't upload_to='media' since that would upload your files in path/to/media/media, ie. two times "media". — dirkgroten
– dirkgroten, Commented Dec 9, 2019 at 15:44

dirkgroten · Accepted Answer · 2019-12-09 15:53:28Z

1

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.

answered Dec 9, 2019 at 15:53

dirkgroten

20.8k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CThomas · Accepted Answer · 2019-12-10 12:07:28Z

0

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

answered Dec 10, 2019 at 12:07

CThomas

1992 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related