Image not displayed on html - html

Question

Image is not displayed on the bootstrap carousel template while trying to load it locally.The image loads when the absolute url (online link) is mentioned. I can't see what mistake I might have made.
The folder tree is included in the picture.
I have tried using absolute image links i.e. online links and the code works perfectly.
While trying to insert the pictures locally, I have tried using \ instead of / , renaming the image files and putting the files in different folders .
{% extends 'base.html' %}
{% block title %}
This is the block title.
{% endblock title %}
{% block body %}
</div class='container'>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="cartoon.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="rick_morty.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="rick_morty.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
{% endblock body %}

Answer 1

You need to make sure that the image's src tag is always starting with /, and the images are in the main path of the site, for example: example.com/cartoon.jpg.
So, your images would look something like this:
<img src="/rick_morty.jpg" class="d-block w-100" alt="...">
and the image must be available under yoursiteurl/rick_morty.jpg