Django failing to load images from my media file but is not giving me a 404 error and has the correct file path. What could be causing this issue?

To clarify my title, I have a database set up in my Django application that takes information from albums, including album covers. The image saves in the database, goes to the correct MEDIA_ROOT specified in my settings.py file, and shows the correct url path when checking the request path. I am using the latest version of Django and have Pillow installed to add the images into the database through the admin site.

Previously, when the file path was wrong, Django served a 404 error and couldn't find the file. Now that the path is correct, it loads for a moment and then says "server not found". When I inspect the image, it says that the "connection used to fetch this resource was not secure." however I am running the server locally and am not in a production enviroment, and all answers related to this issue seem to come from running the server in production.

When I attempt to open the image in a new tab, the tab says "Server not found" after attempting to load the filepath: "http://albums/filename_oja97pG.png" (you can see here the unsercure http response. I replaced the file name for privacy reasons.)

I am unsure what would be causing this issue. Here is my code:

models.py

class Album(models.Model):
    title = models.CharField(
        max_length=200,
        validators=[MinLengthValidator(2, "Must be at least two characters.")]
    )
    release_date = models.DateField()
    picture = models.ImageField(upload_to='albums/', blank=True)
    content_type = models.CharField(max_length=256, blank=True, help_text='The MIMEType of the file')
    description = models.TextField(blank=True)

    def __str__(self):
        return self.title

settings.py

BASE_DIR = Path(__file__).resolve().parent.parent
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')

urls.py

urlpatterns = [
    path('', views.MusicView.as_view(), name='music'),
    path('albums/<int:album_id>', views.AlbumView.as_view(), name='album_detail'),
]

projects urls.py

...

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

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

views.py

class AlbumView(DetailView):
  model = Album
  template_name = 'music/album_detail.html'
  def get(self, request, album_id):
    al = Album.objects.get(pk=album_id)
    if al is not None:
      context = {
      'album' : al,
      }
      return render(request, self.template_name, context)
    else:
      raise Http404('Album does not exist.')

html template being served

{% extends 'base.html' %}

{% block welcome %}
{{ album.title }}
{% if album.content_type %}

<img src="/{{ BASE_DIR }}/{{ album.picture }}">

{% endif %}
{% endblock %}

Thanks for the help. Let me know what other information I can provide. I have attempted to load in other borwsers and have gotten the same problem.