How to load static file of a model in a html templates

Question

I have a static file structure like this -----> static/images/article_images/images.png

here's my settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
    # '/css/',
    # 'images/article_image/',
]

here's what I tried:

{% extends "base.html" %}

{% block content %}
 {% load static %} ---> i have this in my base.html
    <div class="article-block" method="GET">
        {% for article in articles %}

        <!-- <img src="{{ article.image }}" alt="Article image"> -->
        <img src="{% static '{{article.image}}' %}" alt="Article image">
        <h2>{{ article.title }}</h2>
        <p>{{ article.content }}</p>
        {% endfor %}
    </div>
{% endblock %}

here's my model.

from django.db import models
from django.conf import settings

def article_image_path(instance, filename):
    return f"static/images/article_image/{filename}"

class Article(models.Model):
    title = models.CharField(max_length=250)
    content = models.CharField(max_length=1000)
    image = models.ImageField(default='', upload_to=article_image_path)

    def __str__(self):
        return self.title

you can;t use static settings for to show uploaded image. you should use media setting instead — Manoj Tolagekar, Dec 15 '22 at 06:46
@ManojTolagekar can you elaborate more?? do I need to change upload directory path?? — Orynnn, Dec 15 '22 at 07:02
Files uploaded into ImageField are **media** files, not **static**. They need different approaches which are both well described in Django docs. — Ivan Starostin, Dec 15 '22 at 17:09

score 0 · Answer 1 · answered Dec 15 '22 at 06:15

Static files are not bound by model. In your templates you should be using:

 {% extends "base.html" %}
{% load static %} ---> include this line after extends in every template that require static files.
 {% block content %}
 
<div class="article-block" method="GET">
    {% for article in articles %}

    <img src="{{ article.image }}" alt="Article image"/> <-- Use this if image is stored inside article model

    <img src="{% static 'images/image_name.png' %}"   alt="Article image"/> <--use this if your image is stored statically
    
    <h2>{{ article.title }}</h2>
    <p>{{ article.content }}</p>
    {% endfor %}
</div>
{% endblock %}

my images is stored inside the article model with custom path. I've updated my question with the model. I tried both ways, but still no luck. — Orynnn, Dec 15 '22 at 06:47

score 0 · Answer 2 · answered Dec 15 '22 at 07:15

Just remove article_image_path function from models.

And then, add path name in model field image directly.

For ex:

image = models.ImageField(default='', upload_to='images/') #path added here. uploaded images will store in this images folder. images folder will be created inside media folder automatically in your project root.

And in settings.py file just add media settings:

MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

In your main urls.py file, just add this:

+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

EX:

urlpatterns = [
 
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT) #Added here

Note: don't forget to migrate the model after making changes in image field.

How to load static file of a model in a html templates

2 Answers2