show images uploaded by admin in html template

Question

I am new to django and I saw solutions for my problem but none worked.

I make admin upload images as you see in Item class in models.py :

from django.db import models
from django.contrib import admin


class Customer (models.Model):
    username = models.CharField(max_length=500)
    email = models.CharField(max_length=1000 , unique=True)
    phone = models.IntegerField()
    address = models.CharField(max_length=3000)


class Category(models.Model):
    category_title = models.CharField(max_length=100 , unique=True)

    def __str__(self):
        return self.category_title


class Order (models.Model):
    time = models.DateTimeField(auto_now_add=True)
    total = models.IntegerField()
    created_by = models.ForeignKey(Customer, related_name='orders')


class Item (models.Model):
    name = models.CharField(max_length=100 ,unique=True)
    details = models.CharField(max_length=1000)
    price = models.IntegerField()
    item_logo = models.ImageField(upload_to='res/static/res/images')
    category = models.ForeignKey(Category, related_name="items" ,on_delete= models.CASCADE)

    def __str__(self):
        return self.name


class ItemInline(admin.TabularInline):
    model = Item

class CategoryAdmin(admin.ModelAdmin):
    inlines = [
        ItemInline,
    ]

so how can I make those images appear in my HTML ( note: html code works fine but a small default image field appear instead of image ) :

{% extends 'res/menu.html' %}
{% block content %}
<h1>hello</h1>

    <table class="table table-striped table-bordered" style="text-align: left ; border-color: black;" id="pizza_table">
        <tbody>
            {% for item in items %}
                <td>
                    {{ item.name }}
                    <p>{{ item.details }}</p>
                </td>
                <td>
                    <img src="{{item.item_logo}}">
                </td>
                <td>

                </td>
                <td>
                    <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Seafood Pizza', 20 ) ;">Add</button>
                </td>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

thanks in advance

Answer 1

Qoute from the doc :

Using a FileField or an ImageField (see below) in a model takes a few steps:

In your settings file, you'll need to define MEDIA_ROOT as the full path to a directory where you'd like Django to store uploaded files. (For performance, these files are not stored in the database.) Define MEDIA_URL as the base public URL of that directory. Make sure that this directory is writable by the Web server's user account.

Add the FileField or ImageField to your model, defining the upload_to option to specify a subdirectory of MEDIA_ROOT to use for uploaded files.

All that will be stored in your database is a path to the file (relative to MEDIA_ROOT). You'll most likely want to use the convenience url attribute provided by Django. For example, if your ImageField is called mug_shot, you can get the absolute path to your image in a template with {{ object.mug_shot.url }}.

Also you need to modify urls to serve media files during development .

So you need to add MEDIA_ROOT and MEDIA_URL in your settings file:

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

Add to urls file this:

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

and add url method inside template:

<img src="{{item.item_logo.url}}">