Why Static Files And Images Are Not Working On My Django S3 Bucket Project?

While trying to use s3 bucket on my local django project, it does not work. After moving the static files and images to the s3 bucket, it is not rendering any of them. My project s

Solution 1:

The structure is messed up somewhere. With the info given, the following could be leading to problems.

This is incorrect:

STATIC_URL = '/static/'

It should be:

STATIC_URL = AWS_S3_CUSTOM_DOMAIN + '/static/'

When you inspect the elements they should have this format.:

https://bucket-name.s3.amazonaws.com/app-name/css/bootstrap.min.css

https://bucket-name.s3.amazonaws.com/img/stockholm_Samit.jpg

For the first link, if the app-name is 'gallery' the format should be correct. If above didn't solve that issue, You should make sure your BASE_DIR variable is correct.

BASE_DIR = Path(__file__).resolve().parent.parent might need to be: BASE_DIR = Path(__file__).resolve().parent or vice versa.

Also when you upload to S3, you DONT want to upload the static folder. (Don't do this):

|->static
    |    |-> img "folder of png images"
    |    |-> app-name
    |        |-> css "folder contain all css files"
    |        |-> js "folder contains all js files"
    |        |-> img "contains images used for styling"

You want to only upload:

|-> img "folder of png images"
|-> app-name
|-> css "folder contain all css files"
    |-> js "folder contains all js files"
    |-> img "contains images used for styling"

For the second link,

https://bucket-name.s3.amazonaws.com/stockholm_Samit.jpg

you should go to your template and make sure your image tag is pointing to the correct image:

src="{% static 'img/stockholm_Samit.jpg' %}

Additionally, you don't want to have your media root in your static folder. Your static folder should contain static files, ones that don't change. You should have a separate media folder for dynamic files, usually generated by the users of your app. You can read more here: https://browniebroke.com/blog/static-vs-media-in-django/#:~:text=Static%20files%20are%20part%20of,or%20users%20of%20your%20application.

Solution 2:

If name of your bucket is not "bucket-name", make sure to specify bucket name of your bucket in line:

AWS_STORAGE_BUCKET_NAME = 'enter-your-bucket-name'