CODEWITHSUNDEEP
djangostatic
Shane S
Shane S

Reputation: 2293

Django Full image is not loading

I am doing the Tango with Django tutorial. I am using Django version 3.1.1. I was able to get my image to load on the local link 'http://127.0.0.1:8000/static/images/rango.jpg'

I am not getting it to load on to the index.html the code is

<!DOCTYPE html>
{% load static %} 
<html>
    <head>
        <title> Rango</title>
    </head>
    <body>
        <h1>Rango says...</h1>
        <div>
            hey there partner! <br />
            <strong>{{ boldmessage }} </strong><br />
        </div>
        <div>
            <a href="/rango/about/">About</a><br />
            <img src="{% static
                'images/rango.jpg' %}" 
                alt="Picture of Rango" /> 
        </div>
    </body>
</html>

I did try removing the "alt=" in html but that didn't work.
I do not think the problem is my settings.py, but I'll share some parts of the settings.py anyway.

TEMPLATE_DIR = os.path.join(BASE_DIR,'templates') # this is the file path for templates
STATIC_DIR = os.path.join(BASE_DIR,'static') # this is the file path for static
STATICFILES_DIRS = [STATIC_DIR,]
...

#At the very bottom...
STATIC_URL = '/static/'

Upvotes: 0

Views: 151

Answers (2)

Mehdi Mohammadpour
Mehdi Mohammadpour

Reputation: 23

I had the same problem some time ago. Applying these changes solved it. Remove STATIC_DIR and STATICFILES_DIRS from settings.py and replace them with these:

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

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

Upvotes: 1

Shane S
Shane S

Reputation: 2293

So the problem ended up being how the image html was wrapped. It needs to be one line, like below.

<img src="{% static 'images/rango.jpg' %}"alt="Picture of Rango" />

Upvotes: 0

Related Questions