Django image file is not rendering

Question

my settings file is like below,

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

MEDIA_URL = '/static/images/'
MEDIA_ROOT = '/Users/bhargavsaidama/5ai/source/static/images/'

#MEDIA_ROOT = os.path.join(BASE_DIR,'static', 'images') (tried this too)

my html loading page is like below, Note: I am directly using the file path here

index.html:

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

my actual html file is :

{% extends "index.html" %}


{% block content %}

<div class="content">

    <img src ='/Users/bhargavsaidama/5ai/source/5ai/static/images/Indian-economy.jpg' alt="My image">

    <h2 id = "title"><font face = "Comic sans MS"> {{ post.title }} </font></h2>

    {% for sub_text in post.content %}

    <p id = "data"><font face = "Comic sans MS" size="+0.3"> {{ sub_text }} </font></p>

    {% endfor %}

</div>
{% endblock %}

even I tried using:

<img src ='Indian-economy.jpg' alt="My image">

.... but no luck

but the output is

if I am trying with a normal html file lets say:

<html>
<p>  this is bhargav sai</p> 
<img src= '/Users/bhargavsaidama/5ai/source/5ai/static/images/Indian-economy.jpg' alt = 'my image'>
</html>

The output is:

Even my direct url from local host was able to fetch the image:

can anyone help me on this?

You should not be using absolute paths for `MEDIA_ROOT`, just like `STATICFILES_DIRS` — karthikr, May 14 '17 at 04:33
@karthikr even if I use os.path.join(BASE_DIR,'static', 'images') as my media root. the result is same. That is the reason I had to try with absolute path. — Bhargav, May 14 '17 at 04:57

Tiny.D · Accepted Answer · 2017-05-14T13:49:48.690

You'd better to know how to configure and load static files, refer to official doc.

As your jpg is in static/images folders, just change your actual html like this:

{% extends "index.html" %}


{% block content %}

{% load static %} #load static directory
<div class="content">

    #load your static image
    <img src ='{% static "images/Indian-economy.jpg" %}' alt="My image">

    <h2 id = "title"><font face = "Comic sans MS"> {{ post.title }} </font></h2>

    {% for sub_text in post.content %}

    <p id = "data"><font face = "Comic sans MS" size="+0.3"> {{ sub_text }} </font></p>

    {% endfor %}

</div>
{% endblock %}

This will work for your case.

score 0 · Answer 2 · answered May 29 '17 at 01:21

If you are coming from Google, Keep an eye on your DEBUG status in your settings file accessing media files in dev server and prod server are bit different. In prod server they have to be configured with your web server(apache/nginx). please check the official Doc.

Django image file is not rendering

2 Answers2