Loading Image in a React+Django app

Question

So I have a little project written in python/django for the backend and react for the frontend. I followed the tutorial from: http://geezhawk.github.io/using-react-with-django-r

Answer 1

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 (
      

        
          
          Project Name
        
      
    )
  }
}

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