Images not displaying in my for loop Django

i’m making a music streaming website and i want to display the songs in the homepage. I’m using a for loop in songs and everything is working ( but the images are not displaying and i see this .

How can i fix it?

This is models.py:

class Song(models.Model):
song_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=50)
artist = models.CharField(max_length=50)
album = models.CharField(max_length=50, blank=True)
genre = models.CharField(max_length=20, blank=True, default='Album')
song = models.FileField(upload_to="media/songs/", validators=[FileExtensionValidator(allowed_extensions=['mp3', 'wav'])], default="name")
image = models.ImageField(upload_to="media/songimage/", validators=[FileExtensionValidator(allowed_extensions=['jpeg', 'jpg', 'png'])], default="https://placehold.co/300x300/png")
data = models.DateTimeField(auto_now=False, auto_now_add=True)
slug = models.SlugField(unique=True)

def __str__(self):
    return self.name

class Meta:
    ordering = ['name']

and this is the html:

{% for i in songs %}
            <div class="carousel-cell">
                <section class="main_song">
                    <div class="song-card">
                        <div class="containera">
                            <img src="{{i.image}}" id="A_{{i.id}}" alt="song cover">
                            <div class="overlaya"></div>
                            <div>
                                <a class="play-btn" href="{{i.preview_url}}" id="{{i.id}}"><i class="fas fa-play-circle"></i></a>
                                {% if user.is_authenticated %}
                                    <div class="add-playlist-btn">
                                        <a id="W_{{i.song_id}}" title="Add to Playlist" onclick="showDiv(this)"></a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="songName" id="B_{{i.id}}">{{i.name}}</p>
                    </div>
                    <p class="artistName">{{i.singer1}}</p>
                </section>
            </div>
        {% endfor %}

>Solution :

# settings.py

import os

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

# urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # your url patterns
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

{% for i in songs %}
    <div class="carousel-cell">
        <section class="main_song">
            <div class="song-card">
                <div class="containera">
                    <img src="{{ i.image.url }}" id="A_{{ i.id }}" alt="song cover">
                    <div class="overlaya"></div>
                    <div>
                        <a class="play-btn" href="{{ i.song.url }}" id="{{ i.id }}"><i class="fas fa-play-circle"></i></a>
                        {% if user.is_authenticated %}
                            <div class="add-playlist-btn">
                                <a id="W_{{ i.song_id }}" title="Add to Playlist" onclick="showDiv(this)"></a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div>
                <p class="songName" id="B_{{ i.id }}">{{ i.name }}</p>
            </div>
            <p class="artistName">{{ i.artist }}</p>
        </section>
    </div>
{% endfor %}