Django站点后台上传图片无法显示问题求助

问题现象 #

在Django网站中展示从admin面板手动上传的图片时，页面仅显示图片占位图标，调试时返回错误：Not Found: /events/event_pictures/7.png。已确认图片存放在项目根目录的pictures/event_pictures/文件夹内。

相关代码片段 #

models.py（事件模型类） #

class Event_Model(models.Model):
    name = models.CharField(max_length=200)
    explanation = models.TextField(default="")
    link = models.CharField(max_length=300, default="")
    price = models.DecimalField(decimal_places=2, default=0.00, max_digits=10)
    stock = models.IntegerField(default=-1)
    release_date = models.DateField()
    end_date = models.DateField()
    image = models.ImageField(default="default.jpg", upload_to="event_pictures")
    is_avaible = models.BooleanField(default=True)

    # Form Attrs
    form_id = models.ForeignKey(Form_Model, on_delete=models.CASCADE)
    form_title = models.CharField(max_length=200)
    form_explanation = models.TextField(default="")

项目根目录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("", include("User_App.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

调试时使用的项目根目录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("", include("User_App.urls")),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_ROOT, document_root=settings.MEDIA_ROOT)

应用User_App的urls.py #

from django.urls import path
from .views import FormView, CreateFormView, MainPage, EventsPage

urlpatterns = [
    path("", MainPage, name="index"),
    path("form/", FormView, name="form"),
    path("create/", CreateFormView, name="create-form"),
    path("events/", EventsPage, name="events")
]

settings.py（媒体文件配置） #

MEDIA_ROOT = os.path.join(BASE_DIR,'pictures')
MEDIA_URL = '/pictures/'

模板HTML文件 #

{% extends 'base.html' %}
{% load static %}

{% block body %}

    {% for event in events %}
         <div class="card mb-4 mt-5">
            <div class="row g-0">
                <div class="col-md-4">
                    <img class="img-fluid rounded-start" src="{{ event.image }}">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h3 class="card-title">
                            {{ event.name }}

                        </h3>
                        <p class="card-text">
                            {{ event.explanation }}
                        </p>
                        <p>
                            <b>
                                 ücret: {{ event.price }}tl
                            </b>

                        </p>
                    </div>
                    <div class="card-footer ">
                        <span class="text-left">
                            son başvuru tarihi: {{ event.end_date }}
                        </span>
                        <span  style="margin-left:400px">
                            {{ event.stock }} adet kaldı
                        </span>
                    </div>
                </div>
            </div>
         </div>
    {% endfor %}

{% endblock %}

修复步骤 #

1. 修正模板图片路径
   模板中直接使用{{ event.image }}会生成相对路径，导致浏览器从当前页面路径（/events/）下请求图片，与实际媒体URL前缀不匹配。将代码改为：

   <img class="img-fluid rounded-start" src="{{ event.image.url }}">
   

   这样会生成完整的媒体文件URL（如/pictures/event_pictures/7.png）。

2. 修正调试版urls.py配置
   调试代码中错误地将MEDIA_ROOT作为static函数的第一个参数，应该替换为MEDIA_URL，修改后代码：

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

   或者直接使用最初的urls.py配置即可。

3. 验证媒体文件配置
   确认settings.py中的MEDIA_ROOT和MEDIA_URL配置正确，且上传的图片确实存放在BASE_DIR/pictures/event_pictures/目录下。

内容的提问来源于stack exchange，提问作者Mehmet Eren EFEGİL