How can I show my Image in my web site using django

I tried to show image in my web which I uploaded that from admin panel by hand by using django

I was expecting to see my image in web site, but instead it only showed the little img icon, and when I debugged the static in urls.py it returned me 'Not Found: /events/event_pictures/7.png' input

my models.py file's related model class

class Event_Model(models.Model):
    name = models.CharField(max_length=200)
    explanation = models.TextField(default="")
    link = models.CharField(max_length=300, default="")
    price = models.DecimalField(decimal_places=2, default=0.00, max_digits=10)
    stock = models.IntegerField(default=-1)
    release_date = models.DateField()
    end_date = models.DateField()
    image = models.ImageField(default="default.jpg", upload_to="event_pictures")
    is_avaible = models.BooleanField(default=True)

    # Form Attrs
    form_id = models.ForeignKey(Form_Model, on_delete=models.CASCADE)
    form_title = models.CharField(max_length=200)
    form_explanation = models.TextField(default="")

project's urls.py file

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("User_App.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

project's urls.py file code when I used for debugging

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("User_App.urls")),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_ROOT, document_root=settings.MEDIA_ROOT)

app's urls.py file

from django.urls import path
from .views import FormView, CreateFormView, MainPage, EventsPage



urlpatterns = [
    path("", MainPage, name="index"),
    path("form/", FormView, name="form"),
    path("create/", CreateFormView, name="create-form"),
    path("events/", EventsPage, name="events")
]

settings.py file

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

related html file

{% extends 'base.html' %}
{% load static %}

{% block body %}

    {% for event in events %}
         <div class="card mb-4 mt-5">
            <div class="row g-0">
                <div class="col-md-4">
                    <img class="img-fluid rounded-start" src="{{ event.image }}">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h3 class="card-title">
                            {{ event.name }}

                        </h3>
                        <p class="card-text">
                            {{ event.explanation }}
                        </p>
                        <p>
                            <b>
                                 ücret: {{ event.price }}tl
                            </b>

                        </p>
                    </div>
                    <div class="card-footer ">
                        <span class="text-left">
                            son başvuru tarihi: {{ event.end_date }}
                        </span>
                        <span  style="margin-left:400px">
                            {{ event.stock }} adet kaldı
                        </span>
                    </div>
                </div>
            </div>
         </div>
    {% endfor %}


{% endblock %}

Note: I can see pictures folder inside Web_Project folder and inside that pictures folder I also see event_pictures folder and there is the correct png file inside event_pictures folder

You can show the image with {{ event.image.url }} in your django template instead of {{ event.image }}

Back to Top