Django; display problems for image of model object passed to template from view

Question

Created new item with name, description and an image with django admin and attached image and I saw the image pop into the media folder on the server as it was uploaded. I passed the item from view to template. The item name, description showed up in the website but the image ('image.jpg') did not. Any ideas? Maybe nginx is causing the image to stay concealed? I'm using nginx, gunicorn, django.

note: on Chrome, it shows a torn image icon. The source code on the browser shows <img src="image.jpg/"> . I noticed that the static files are in the format : <img src="static/app1/image123.jpg and display fine. Perhaps my problem image should have media/app1/...?

My ultimate goal is to disaply a graph/image BUT this image is frequently overwritten, with changes, in the media folder from a separate app on the server. This way the viewer can get the latest image.

abridged file structure, for easy viewing:

-website1
-media
 image.jpeg
+static
-app1
 -templates
  -app1
   index.html
   layout.html
-website1
 settings.py
 ..

website1 urls.py:

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

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

app1's urls.py:

from django.conf.urls import url
from . import views
from django.urls import path, include

urlpatterns = [
    path('', views.index,name='index'),
]

settings.py:

...
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

MEDIA_URL = '/media/'
MEDIA_ROOT= 'media/'

views.py:

from django.shortcuts import render
from django.http import HttpResponse
import datetime

from PIL import Image
from django.core.files import File
from django.conf import settings
from io import BytesIO
import os
from app1.models import Item

def index(request):
    now = datetime.datetime.now()
    return render(request,'app1/index.html', {
        'Data':now,
        'itemContext':Item.objects.get(id=1)
    })

index.html:

{% extends 'app1/layout.html' %}
{% block content %}
<h1 align="center">{{Data}}</h1>
<h2 align="center">
    {% load static %}
    <img src="{% static "sentiment_analysis/image.jpeg" %}" alt="No immage"/>
</h2>
<h4>

    {{itemContext.name}}
    {{itemContext.description}}
    <img src="{{ itemContext.image }}"/>

</h4>
{% endblock %}

app1's models.py:

from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=32)
    description = models.TextField()
    image = models.ImageField(blank=True, null=True)

    def __str__(self):
        return self.name

nginx/sites-avilable.conf:

...
...
root /usr/share/nginx/html;
index index.html index.htm;

location /static/ {
    alias   /home/jeff/website1/static/;
}

location /media/ {
    alias /home/jeff/website1/media/;
}
...
...

Answer 1

[SOLUTION WAS A FILE PERMISSIONS ISSUE... SEE COMMENTS]

in the image src you have double double quotes so the src isnt working replace it with that and you should be good

<img src="{% static 'sentiment_analysis/image.jpeg' %}" alt="No immage"/>



eidt your code is like that 
<img src="{% static " #this quotes ends here 
sentiment_analysis/image.jpeg # this isnt inside any quotation 
" %}" # second quotation start and end here 

in here you should relace :

<img src="{{ itemContext.image }}"/>

with this

<img src="{{ itemContext.image.url }}"/>