I am encountering a problem with my website. The images added on the backend, are not displaying on the front end.
I believe the issue is with the AWS S3 bucket configuration and its public image access in my Django web application. Despite implementing a bucket policy to allow public read access and configuring my Django settings accordingly, I am still experiencing difficulties with image loading in web browsers.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::mybucketname/",
"Condition": {
"StringEquals": {
"s3:ExistingObjectTag/public": "yes"
}
}
}
]
}
Problem Description:
The images stored in my S3 bucket are not loading in any web browsers. When I attempt to open an image in a new tab, I receive an "Access Denied" error message.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
models.py
class Service(models.Model):
title = models.CharField(max_length=50)
image = models.ImageField(upload_to='images/')
uploaded_at = models.DateTimeField(auto_now_add=True)
description = models.TextField()
s3_image_url = models.URLField(default='https://s3.amazonaws.com/dinoelectric/default-image.png')
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('MyApp.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
setings.py
from pathlib import Path
import os\
BASE_DIR = Path(file).resolve().parent.parent
SECRET_KEY = ''
DEBUG = True
ALLOWED_HOSTS = ["website.com"]
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT =
EMAIL_USE_TLS = True
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''
EMAIL_USE_SSL = False
EMAIL_DEBUG = True
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'MyApp',
'whitenoise.runserver_nostatic'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware'
]
ROOT_URLCONF = 'Website.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'Website.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': '',
'USER': '',
'PASSWORD': '',
'HOST': '',
'PORT': '',
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles')
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = ''
AWS_S3_SIGNATURE_NAME = '',
AWS_S3_REGION_NAME = ''
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None
AWS_S3_VERITY = True
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
#index.html
<section class="bg-light p-5" id="services">
<div class="container mt-3 mb-3">
<div class="heading mt-2">
<h2 class="text-muted display-5 text-center">Services</h2>
</div>
<div class="row mt-4">
{% for service in services %}
<div class="col-md-4 mb-4">
<div class="card p-3">
<div class="d-flex justify-content-center align-items-center">
<img src="{{ service.s3_image_url }}" class="square" alt="{{ service.title }}" width="64">
</div>
<h5 class="mt-3">{{ service.title }}</h5>
<p>{{ service.description }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
views.py
def home(request):
current_date = datetime.datetime.now().year
recipient_email = 'email@gmail.com' # Fixed recipient email
gallery = Gallery.objects.all()
services = Service.objects.all()
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
form.save()
# Send email (configure email settings)
user_name = form.cleaned_data['name']
subject = form.cleaned_data['subject']
message = form.cleaned_data['message']
email = form.cleaned_data['email']
# Create a formatted HTML message
html_message = f"<p><strong>User {user_name} wants to reach out to you:</strong></p>"
html_message += f"<p><strong>Message:</strong> {message}</p>"
html_message += f"<p><strong>Email:</strong> {email}</p>"
# Send the email with both plain text and HTML content
send_mail(
subject,
message,
'your_email@example.com',
[recipient_email],
html_message=html_message,
)
return redirect('index') # Redirect to a success page
else:
form = ContactForm()
return render(request, "index.html", {'current_date': current_date, 'form': form, 'gallery': gallery, 'services': services})
AWS OFFICIALUpdated 2 years ago
