Unable to display images on django website

[Randy]

I have a django website on render.com where users can upload image files to the website. These images are stored in Amazon S3 buckets, where I have an account. The render.com webservice stores the environmental variables for accessing my Amazon S3 bucket.

A user can successfully upload images to Amazon S3 using my website. The website utilizes django-storages and boto3 for this. However the images do not display on the website, instead the value of the alt attribute for the image is displayed.

Upon right-clicking on the webpage to look at the page source code, the tag associated with the uploaded image can be seen, the value for its src attribute is the URL for the image stored in the Amazon S3 bucket. Copying-&-pasting the URL into the web browser address bar successfully displays the image.

I am a student practicing setting up a production-like environment, for the first time. The security settings for the Amazon S3 bucket are as lax as I could possibly make them. CORS issues should be looked after too.

However, clicking on the place where the image should be gives this:

InvalidRequestThe authorization mechanism you have provided is not supported. Please use AWS4-HMAC-SHA256.AH707FVNMH97G0GE8uMk6js4VPUvJmcnvRp+u1GeXq+3LTC6iHVlmTaFzKKoiQadENtTzFRLOA0WiywstxlcCxGUhAQ=

I do not know exactly what it means.

As well, even prior to implementing Amazon S3, I have not been able to display static image files held in the webservice ‘staticfiles’ directory. I employ ‘whitenoise’ to attempt to access them, and ‘whitenoise’ works for CSS files, at least the CSS styling is correct. No amount of adjusting my settings.py made a difference, these changes usually result in HTTP status 500. I can see the image files inside ‘staticfiles’, the subdirectories are correct, but these will not display.

[jeremy-render]

Hey Randy,

It seems there are multiple issues at play here… There’s not a lot of help I can provide seeing your description since the issue may be coming from a lot of angles.

Make sure you check the versions of your libraries and confirm the S3 region. Your Django settings for the S3 bucket’s region should match the actual bucket’s location. Also, verify that your S3 bucket policy permits public access if that’s your intention, and ensure the CORS settings allow requests from your site.

Regarding the problem with static files not being displayed, make sure your settings include STATICFILES_STORAGE set to ‘whitenoise.storage.CompressedManifestStaticFilesStorage’, and that ‘whitenoise.middleware.WhiteNoiseMiddleware’ is in your MIDDLEWARE list. Check your logs for any errors specifically related to accessing static files. Make sure you execute ‘python manage.py collectstatic’ to collect static files, and ensure that ‘DEBUG’ is set to ‘False’ and ‘ALLOWED_HOSTS’ is correctly configured in your ‘settings.py’.

Jérémy.
Render Support, UTC+3

[Randy]

@jeremy-render Thanks for replying. I will keep working on it.