I have a pretty basic issue am unable to solve. I am serving static files from S3 using Django storages. In my template, I setup img source like this:
"{% static 'fun_share/img/logo/logo.svg' %}"
while having
STATIC_URL = "/static/"
Django storages handle the actual img src "translation", ie becomes https://my-bucket.amazonaws.com/static/fun_share/img/logo/logo.svg?..... So far so good.
Now, I want to change the image src from plain javascript to I different image (logo-2.svg).
What is the best way to handle calling the s3 bucket with proper URL (also considering secrets and keys)?
I would expect
const logo = document.querySelector(".navbar-brand img");
logo.src = "/static/fun_share/img/logo/logo-2.svg";
to work, but that does not seem to be the case, as the js call is made to the server itself, not redirected to the s3 bucket.
Any help much appriciated.
You can convert the current source to a URL and then change the pathname to get a URL with the same host, query params, etc
const logo = document.querySelector(".navbar-brand img");
let sourceUrl = new URL(logo.src)
sourceUrl.pathname = '/static/fun_share/img/logo/logo-2.svg'
logo.src = sourceUrl.toString()