html - Hur man inkluderar Django statisk URL med JavaScript?
Jag har en Django-applikation som lagrar statiska bilder på Digital Ocean Spaces. Jag kan enkelt visa dessa statiska bilder i min mall genom att göra:<img>{% static 'images/my_image.png' %}</img>
Om jag inspekterar HTML-sidan efter att detta laddats kommer jag att se något som liknar:
https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823Men nu vill jag att den här bilden ska ändras dynamiskt med JavaScript.
Så jag försökte:
document.getElementById(id+"dynamicImage").src = "{% static 'images/my_image_2.png' %}";Vilket nästan fungerar, men bilden laddas inte. Och anledningen till detta är efter att ha inspekterat src som javascriptet tillhandahöll:
https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823Du kan se att varhelst det fanns en & så lades amp; till det. Vad är det korrekta sättet att göra detta?
Jag kan tänka mig två sätt att rätta till detta, men de verkar hackiga.
- Jag skulle kunna hårdkoda URL:erna i JavaScript, vilket kommer att bli en uppdateringsmardröm när saker förändras
- Jag skulle kunna göra
<img id='my_image' hidden >{% static 'images/my_image.png' %}</img>för alla länkar jag planerar att använda, och sedan komma åt denna URL i JavaScript medlet URL=document.getElementById("my_image").innerHTML;. Detta skulle vara mindre av en uppdateringsmardröm, men verkar hackigt och måste finnas ett bättre sätt.
Svar #1
om din Django körs på port 8000 använd
http://localhost:8000/static/images/my_image_2.png
alla dina statiska filer serveras med baseurl/static/{din filväg}
Svar #2
Jag löste det genom att göra:
document.getElementById(id+"dynamicImage").src = ("{% static 'images/my_image_2.png' %}").replace(/&/g, "&");
.replace(/&/g, "&") kommer att ersätta alla & med &. / och /g är regex för att ersätta alla.
