Django应用中AWS S3媒体图片无法显示问题排查求助

已完成Django与AWS S3的相关配置，但存储在S3的媒体图片仍无法显示，开发工具和终端无任何报错，甚至连文件损坏的图标都不显示。

配置详情 #

settings.py（敏感信息已隐去） #

STATIC_URL = "staticfiles/"
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

# amazon s3
MEDIAFILES_LOCATION = 'media'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % os.environ.get('')
AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = ''
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_REGION_NAME = ''
AWS_S3_VERIFY = True

# config/settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/images/')
MEDIA_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, MEDIAFILES_LOCATION)

models.py 代码 #

使用ImageField字段存储图片，上传路径设置为auctions/images/

index.html 模板代码 #

{% for auction in allAuctions %}
    <div class="col">
        <div class="card shadow-sm">
            <img src="{{ auction.image.url }}" class="bd-placeholder-img card-img-top" width="100%"
                 height="225"
                 xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
                 preserveAspectRatio="xMidYMid slice" focusable="false" style="object-fit: cover;">
{% endfor %}

AWS S3 相关配置 #

• 存储桶策略：设置了允许所有用户读取存储桶内对象的权限
• 存储桶设置：已开启静态网站托管，索引文档为index.html，错误文档为error.html
• 页面显示效果：图片位置为空白占位，无任何加载失败提示

排查方向 #

1. 检查配置完整性：

   • AWS_S3_CUSTOM_DOMAIN中os.environ.get('')为空，需传入正确的存储桶名称，或直接写死为f"{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com"
   • 确认AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY、AWS_STORAGE_BUCKET_NAME、AWS_S3_REGION_NAME已正确填写，且对应IAM用户具备S3对象读取权限

2. 验证MEDIA_URL有效性：

   • 在Django shell中执行from django.conf import settings; print(settings.MEDIA_URL)，检查生成的URL是否格式正确（比如是否出现https:///media/这类无效路径）
   • 通过浏览器开发者工具查看页面中img标签的src属性，直接访问该URL测试是否能打开图片

3. 确认S3对象权限：

   • 检查S3控制台中对应图片对象的ACL是否为public-read，避免全局ACL设置未覆盖单个对象
   • 确保存储桶策略包含正确的读取权限规则，示例：

     {
         "Version": "2012-10-17",
         "Statement": [
             {
                 "Effect": "Allow",
                 "Principal": "*",
                 "Action": "s3:GetObject",
                 "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
             }
         ]
     }
     

4. 核对图片存储路径：

   • 结合MEDIAFILES_LOCATION = 'media'与models中upload_to='auctions/images/'，图片应存储在S3的media/auctions/images/路径下，需确认该路径下存在对应文件
   • 检查auction.image.url渲染的路径是否与S3中实际文件路径匹配

5. 区域与端点检查：

   • 如果使用AWS中国区或特殊区域，需确认AWS_S3_REGION_NAME正确，部分区域需额外配置AWS_S3_ENDPOINT_URL

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