CRUD编辑页面如何展示已上传的图片？

修复方案 #

你已经在代码中写了展示图片的雏形代码，只需取消注释并做简单优化即可实现需求：

1. 启用并完善图片展示代码
   取消注释掉的图片渲染代码，同时增加图片存在性判断，避免无图片时出现错误，优化用户体验：

<label for="supplier_images">Image:</label>
<input type="file" name="image"> <br><br>
{% if products.image %}
<span>当前已上传图片:</span> 
<img src="{{ products.image.url }}" alt="{{ products.product_name }}的图片" width="100">
{% else %}
<span>暂无上传图片</span>
{% endif %}
<br><br>

2. 验证Django媒体文件配置
   确保项目已正确配置媒体文件相关设置：

• 在settings.py中配置媒体路径：

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

• 在项目根urls.py中添加媒体文件路由：

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

urlpatterns = [
    # 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 确认模型字段配置
   确保Product模型中的图片字段定义正确：

from django.db import models

class Product(models.Model):
    # 其他字段
    image = models.ImageField(upload_to='product_images/', blank=True, null=True)

原代码失效原因 #

原代码中的图片展示标签被注释，且未添加图片存在性判断，若产品无上传图片时直接调用{{ products.image.url }}会触发错误，添加{% if products.image %}判断可避免此类问题。

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