How to display images associated with model?

Hello, everyone. I’m currently building a website to display some projects I plan on creating. The idea is to have a page that displays an array of cards using Bootstrap that have images on top, with each image being associated with the Project model I have defined. I also have two images in a Navbar that have links embedded in them. For each of these types of images (the image links and the project headers), I used two different file paths, and it was working until I uploaded the site to the PythonAnywhere server. So in order to try and rectify the issue, I’m attempting to place all the images in one folder. However, I am at my wits’ end trying to successfully do so. I would appreciate anyone’s help with this situation. Here is the code that seems applicable:


from django.db import models
from tinymce.models import HTMLField

class Project(models.Model):
	"""A class to showcase a project"""
	title = models.CharField(max_length=100)
	date = models.DateField(auto_now_add=True)
	image = models.ImageField(upload_to='my_site/static', default='')

	def __str__(self):
		return self.title

class About(models.Model):
	"""A class to introduce myself"""
	info = models.TextField()

	class Meta:
		verbose_name_plural = 'About'

	def __str__(self):

class Body(models.Model):
	"""A class to represent info about project"""
	project = models.ForeignKey(Project, on_delete=models.CASCADE)
	description = HTMLField(default='')
	process = HTMLField(default='')
	learned = HTMLField(default='')

	class Meta:
		verbose_name_plural = 'Bodies'

	def __str__(self):
		return f"{self.project}: {self.description[:20]}"


from django.shortcuts import render, redirect
from django.forms import ModelForm

from .models import About, Project
# from .forms import CommentForm

def about(request):
	info = About.objects.get(id=1)
	context = {'info': info}
	return render(request, 'my_sites/about.html', context)

def projects(request):
	projects = Project.objects.order_by('date')
	context = {'projects': projects}
	return render(request, 'my_sites/projects.html', context)

def project(request, project_id):
	project = Project.objects.get(id=project_id)
	bodies = project.body_set.order_by()
	comments = project.comment_set.order_by('-date')
	context = {'project': project, 'bodies': bodies}
	return render(request, 'my_sites/project.html', context)


from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

STATIC_URL = 'static/'

    os.path.join(BASE_DIR, 'static'),


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

urlpatterns = [
    path('', include('my_sites.urls')),
    path('', include('tinymce.urls')),

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

The Navbar:

{% load bootstrap4 %}
{% load static %}

<!doctype html>
<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,
		initial-scale=1, shrink-to-fit=no">

	{% bootstrap_css %}
	{% bootstrap_javascript jquery="full" %}
	<nav class="navbar navbar-expand bg-dark navbar-dark mb-4 border" >
		<div class="container">
			<a href="{% url 'my_sites:about' %}" class="navbar-brand"
			<div class="collapse navbar-collapse">	
				<ul class="navbar-nav">
					<li class="navbar-brand">
						<a href="{% url 'my_sites:projects' %}" class="nav-link active">Projects</a>
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="">
						<img src="{% static 'linkedin.png' %}" width=30 height=30></a>
				<li class="nav-item px-2">
					<a href="mailto:****">
						<img src="{% static 'gmail.png' %}" alt="Gmail" width=30 height=30></a>
	<main role="main" class="container">
		<div class="pb-2 mb-2 border-bottom">
			{% block page_header %}{% endblock page_header %}
			{% block content %}{% endblock content %}

The Projects Page:

{% extends 'my_sites/base.html' %}
{% load bootstrap4 %}
{% load static %}

{% block page_header %}
	<h1 style="font-size: 20;">Projects</h1>
{% endblock page_header %}

{% block content %}
		<div class="row">
			{% for project in projects %}			
				<div class="col-sm-6">
					<div class="card border-dark mb-4">
						<img class="card-img-top" src="{{ project.image.url }}"
							alt="Card Header" height="300_000">
						<div class="card-body d-flex flex-column">
							<h2 class="card-title">{{ project.title }}</h2>
							<bold class="card-subtitle">{{|date:'M d, Y'}}</bold>															
							<a href="{% url 'my_sites:project' %}" 
								class="btn btn-primary ml-auto">View</a>							
			{% endfor %}

{% endblock content %}

Finally, the files path is:
my_site → (static → each individual image) & (my_site → urls & settings) & (my_sites → urls & models & templates)

my_site is the main folder, which in turn has my static (images) folder, the main project folder (my_site) and the app folder (my_sites).

Thank you, everyone, for your help!

Please Post the text of your code into the body of your post, do not post images of code.

When posting code (or templates, error messages, tracebacks, etc), enclose the code between lines of three backtick - ` characters. This means you’ll have a line of , then your code, then another line of . This forces the forum software to keep your code properly formatted.