[Solved]-Loading Image in a React+Django app

by

10👍

✅

I ran into the same problem that you are running into when I was building a react front-end, django backend single-page-app. The issue is that webpack controls imports in the JS code and wants to manage the location of static files, but django is the one hosting the website and, thus, the static files.

The way that we worked around this is by not importing the images in the javascript but, instead, putting the url path to the image that points to the location where it is being hosted by django.

After looking at the tutorial you linked to, I believe you should make the following additions to your django app:

  • Add STATIC_URL = '/static/' to your settings.py

  • Either put the logo.jpeg, and subsequent images, in your assets/ folder or add the resources/ folder to the STATICFILES_DIR variable in settings.py as such (assuming resources is in the top level direcrory of your project):

    STATICFILES_DIRS = (
    #This lets Django's collectstatic store our bundles
    os.path.join(BASE_DIR, 'assets'), 
    os.path.join(BASE_DIR, 'resources'), 
)

Now, you should be able to access the image (if you do django admin.py runserver) by going to 127.0.0.1:8000/static/logo.jpeg. Within the HTML/JS, the URL to the image is simply "/static/logo.jpeg" since within the browser it will resolve that to the entire URL.

Thus, now if you have an image that you put in your assets or resources folder with a path within the folder of "path/to/image.jpeg", then the URL to put as the src of the image in your react code is "/static/path/to/image.jpeg" (the / in the beginning is very important to ensure it does the absolute URL). Thus, you can change your Header class to be:

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark">
        <a className="navbar-brand" href="#">
          <img src={"/static/logo.jpeg"} width="30" height="30" className="d-inline-block align-top" alt="" />
          Project Name
        </a>
      </nav>
    )
  }
}

This should work as long as your host your static files through Django.

👤Rohan Varma

Leave a comment