Why can't I see the image?

Question

project name: mypage
application name: hoge
database: sqlite3

Hmmm, I was able to upload the image.
'mypage/media/uploads'

(models.py)
class Staff(models.Model):
    """shop staff"""
    name = models.CharField('display_name', max_length=50)
    user = models.ForeignKey(get_user_model(), on_delete=models.CASCADE)
    store = models.ForeignKey(Store, verbose_name='shop', on_delete=models.CASCADE)
    # it mean localhost/media/uploads/
    image = models.ImageField(upload_to='uploads/', null=True, blank=True)

    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['user', 'store'], name='unique_staff'),
        ]

    def __str__(self):
        return f'{self.store.name} - {self.name}'

(settings.py)
  :
STATIC_URL = '/static/'
MEDIA_ROOT = BASE_DIR / 'media/'
MEDIA_URL = '/media/'

(urls.py)
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

I can upload.

I can register to sqlite3

I try to load a picture.

(calendar.html)
{% extends 'hoge/base.html' %}

{% block content %}

    <h1>{{ staff.store.name }}店 {{ staff.name }}</h1>
    <img src="{{ staff.image.url }}" alt="missing image">
       :

(console)
mypage> python manage.py runserver
  [12/Feb/2022 19:20:49] "GET /booking/staff/1/calendar/ HTTP/1.1" 200 13998
  Not Found: /media/uploads/photo.png
  [12/Feb/2022 19:20:49] "GET /media/uploads/photo.png HTTP/1.1" 404 2254

I can display calendar page but nothing the picture

The path seems to match.

The actual picture is in "http://127.0.0.1:8000/booking/media/uploads/photo.png"
No need for "/booking"
What is my perception gap? My head is tired...
The source is on github.

Answer 1

The problem is in the URLs config, remove this line of code

+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) from hoge.urls and put this into config URLs

In your original settings, you have included the hoge app URLs under the booking/ endpoint so that's why your image URLs are attached with booking/.

Update the URLs like this.

#config.urls.py 
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

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

And

#hoge.urls.py 
from django.urls import path
from . import views


app_name = 'booking'

urlpatterns = [
    path('', views.StoreList.as_view(), name='store_list'),
    path('store/<int:pk>/staffs/', views.StaffList.as_view(), name='staff_list'),
    path('staff/<int:pk>/calendar/', views.StaffCalendar.as_view(), name='calendar'),
    path('staff/<int:pk>/calendar/<int:year>/<int:month>/<int:day>/', views.StaffCalendar.as_view(), name='calendar'),
] 

This will fix the URL problem of loading the image properly.