Django项目store页面无法加载/media/images/图片的问题求助

问题描述 #

在Django项目的store页面展示/media/images/目录下的图片时，出现文件未找到错误，控制台返回404状态码。

控制台输出 #

python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 19, 2023 - 04:16:07
Django version 4.2.7, using settings 'marketplace.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

[19/Nov/2023 04:16:10] "GET /store/ HTTP/1.1" 200 1282
Not Found: /media/images/Download-Icon.png
[19/Nov/2023 04:16:11] "GET /media/images/Download-Icon.png HTTP/1.1" 404 2278
[19/Nov/2023 04:16:11] "GET /store/ HTTP/1.1" 200 1282
Not Found: /media/images/Download-Icon.png

Settings.py 相关配置 #

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

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'store'
]

Store/Models.py #

class Product(models.Model):
    title = models.CharField(max_length=64)
    description = models.TextField()
    images = models.ImageField(upload_to='images/')
    price = models.DecimalField(max_digits=7, decimal_places=2) # Max Value: 99,999.99
    sold = models.BooleanField()

    def __str__(self):
        return self.title

Store/Urls.py #

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from . import views

urlpatterns = [
    path('', views.store_catalog, name='store_catalog'),
    path('about', views.store_info, name='store_info')
]

# In production, you would typically let your web server (like Nginx or Apache) handle serving static files.
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Store/Views.py #

from django.shortcuts import render
from django.contrib.auth.models import User

from .models import Product

def store_catalog(request):

    products = Product.objects.all();

    return render(request, 'store/store_catalog.html', {"products": products})

def store_info(request):
    return render(request, 'store/store_info.html', {})

HTML模板片段 #

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

....

<section id="product-catalog">
    <h2>Catalog</h2>
    <div class="product-list">
        {% for product in products %}
            <div class="product">
                <img src="{{ product.images.url }}" alt="{{ product.title }}">
                <h3>{{ product.title }}</h3>
                <p><strong>₴</strong>{{ product.price }}</p>
            </div>
        {% endfor %}
    </div>
</section>

排查与解决方案 #

1. 检查文件实际路径 #

• 确认项目根目录下是否存在media/images/Download-Icon.png文件，注意大小写敏感（Linux/macOS系统需严格匹配文件名）。
• 若通过后台上传图片，检查上传过程是否有报错，确保文件确实保存到MEDIA_ROOT指定路径。

2. 验证MEDIA路径配置 #

• 在settings.py中添加打印语句确认路径正确性：

  print("MEDIA_ROOT:", MEDIA_ROOT)
  

  运行python manage.py runserver查看输出路径是否与实际文件存储路径一致。

3. 确认根路由配置 #

• 项目根目录的urls.py必须正确引入store的路由，否则媒体文件路由不会生效：

  from django.contrib import admin
  from django.urls import path, include
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('store/', include('store.urls')),
  ]
  

4. 检查DEBUG模式状态 #

• 媒体文件的自动服务仅在DEBUG=True时生效，确认settings.py中DEBUG值为True。

5. 核对数据库存储路径 #

• 登录Django后台，查看对应Product对象的images字段值是否为images/Download-Icon.png，避免路径拼写错误或多余前缀。

6. 清理浏览器缓存 #

• 按Ctrl+Shift+R强制刷新页面，清除浏览器缓存的无效路径，重新请求图片。

内容的提问来源于stack exchange，提问作者Oyer