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=1621600823

Men 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&amp;Signature=XXXXXXXXXXXXXXXXXX%3D&amp;Expires=1621600823

Du 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.

  1. Jag skulle kunna hårdkoda URL:erna i JavaScript, vilket kommer att bli en uppdateringsmardröm när saker förändras
  2. 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 med let 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(/&amp;/g, "&");

.replace(/&amp;/g, "&") kommer att ersätta alla &amp; med &. / och /g är regex för att ersätta alla.