I've encountered some challenges when trying to display my static data using the css background-image tag.
For instance, consider the following code snippet:
<section class="banner-area" style="background-image: url('../../static/main/img/search4.jpg')>;
Upon inspecting the element in my browser, I noticed that it is not being linked to my AWS S3 bucket and the URL remains unchanged as shown below:
url('../../static/main/img/search4.jpg')
However, when I use the source tag to render an image, everything works as expected. For example:
<img src="{% static 'main/img/search4.jpg' %}/>
By examining the element in the browser, I can see that it is now properly linked to my S3 bucket, like so:
src="https://mybucket-bucket.s3.amazonaws.com/main/img/search4.jpg?ETC...."
In my settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "main/static"),
)
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/img')
MEDIA_URL = "/media/"
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL='https://mybucket-bucket.s3.us-east-2.amazonaws.com/'
Any advice on this matter would be greatly appreciated.
Best regards, Marvin