Django AWS S3存储桶内容不会显示在HTML页面上

我已经设置了s3存储桶,并使用django应用程序对其进行了测试。我能够通过django admin将照片上传到s3,因为我看到它创建了一个文件夹并在其中上传了图像文件;但是,图像不会显示在HTML页面上。甚至没有显示我设置的默认图像(该图像已在s3中上传)。我尝试阅读并观看一些教程,以检查是否错过了某些内容,但到目前为止我还没有发现任何内容。我还通过使用inspect在浏览器中检查了图像的src标记,我看到它来自于Amazon s3。我在这里想念什么?我可以尝试其他什么解决方案?

我之前设置过白噪声,但是已经将其从settings.py中删除了。我是django的新手,所以错过了某个步骤吗?

这是我的settings.py(我在bash_profile中将调试设置为false):

...

DEBUG = (os.environ.get('DEBUG_VALUE') == 'True')

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'crispy_forms',
    'django_summernote',
    'storages',
]

...

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

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

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')

AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

这是我的models.py(图片部分的模型):

class Post(models.Model):
    title = models.CharField(max_length=255, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='post-covers', default='placeholder.jpg')
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    summary = models.TextField(max_length=255, default='')
    body = models.TextField()
    created_on = models.DateTimeField(auto_now_add=True)
    updated_on = models.DateTimeField(auto_now=True)
    status = models.IntegerField(choices=STATUS, default=0)

    def __str__(self):
        return self.title

我已将其添加到我的urls.py中:

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

这是我的HTML页面中试图显示图像的部分:

          {% for post in object_list %}
                    <!-- Card -->
                    <div class="card recent-card">
                        <!-- Card image -->
                        <div style="position: absolute; left: 50%;">
                            <div class="view overlay shadow-effect1 raise-img round-corner" data-aos="fade-up" data-aos-duration="2000" data-aos-once="true">
                                <img class="card-img-top" src="{{ post.image.url }}" alt="Card image cap">
                                <a href="">
                                    <div class="mask rgba-white-slight"></div>
                                </a>
                            </div>
                        </div>


                        <!-- Card content -->
                        <div class="card-body lower-card-body">
                            <!-- Title -->
                            <h4 class="font-weight-bold card-title">{{ post.title }} </h4> 
                            <!-- Category -->
                            <span class="badge badge-pill badge-light mb-3">{{ post.category }}</span>
                            <!-- Text -->
                            <p class="card-text">{{ post.summary }}</p>
                            <!-- Button -->
                            <a class="btn btn-main text-white" href="{% url 'blog-detail' post.slug %}">Read more</a>
                        </div>

                        <!-- Card footer -->
                        <div class="card-footer text-muted text-center blog-card-footer-container">
                            <!-- Author -->
                            <p class="card-text blog-card-footer-text"> {{ post.author.first_name }} {{ post.author.last_name }}</p>
                            <p class="card-text blog-card-footer-text">|</p>
                            <!-- Timestamp -->
                            <p class="card-text blog-card-footer-text">{{ post.updated_on }}</p>
                        </div>
                    </div>
                {% endfor %}

这是我的S3存储桶(如果post-covers文件夹不存在,则创建该文件夹,这是我放置上载图像的位置):

s3

编辑:

我已经将CORS配置设置为此:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
评论