html - How to include Django static URL using JavaScript? - Stack Overflow

admin管理员组

文章数量:1401592

I have a django application storing static images on digital ocean spaces. I can easily display these static images in my template by doing:<img>{% static 'images/my_image.png' %}</img>

If I inspect the HTML page after this loads, I will see something like:

.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

But now I want to have this image change dynamically using javascript.

So I tried:

document.getElementById(id+"dynamicImage").src = "{% static 'images/my_image_2.png' %}";

Which almost works, but the image does not load. And the reason for this is after inspecting the src that the javascript supplied:

.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

You can see wherever there was an & it appended amp; to it. What is the correct way to do this?

I can think of 2 ways to correct this, but they seem hacky.

1. I could hard code the URL's into the javascript, which will be an updating nightmare as things change
2. I could do <img id = 'my_image' hidden >{% static 'images/my_image.png' %}</img> for all the links I plan on using, then access this URL in the javascript using let URL = document.getElementById("my_image").innerHTML;. This will be less of an updating nightmare, but seems hacky and must be a better way.

I have a django application storing static images on digital ocean spaces. I can easily display these static images in my template by doing:<img>{% static 'images/my_image.png' %}</img>

If I inspect the HTML page after this loads, I will see something like:

https://nyc3.digitaloceanspaces./nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

But now I want to have this image change dynamically using javascript.

So I tried:

document.getElementById(id+"dynamicImage").src = "{% static 'images/my_image_2.png' %}";

Which almost works, but the image does not load. And the reason for this is after inspecting the src that the javascript supplied:

https://nyc3.digitaloceanspaces./nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

You can see wherever there was an & it appended amp; to it. What is the correct way to do this?

I can think of 2 ways to correct this, but they seem hacky.

1. I could hard code the URL's into the javascript, which will be an updating nightmare as things change
2. I could do <img id = 'my_image' hidden >{% static 'images/my_image.png' %}</img> for all the links I plan on using, then access this URL in the javascript using let URL = document.getElementById("my_image").innerHTML;. This will be less of an updating nightmare, but seems hacky and must be a better way.

• javascript
• html
• django
• digital-ocean

Share Improve this question Follow edited May 26, 2021 at 13:19 MattG asked May 21, 2021 at 12:02 MattGMattG 1,93266 gold badges2929 silver badges5555 bronze badges 2

• Have you tried decodeURI by any chance? This SO question has a couple of options mentioned can you try them? stackoverflow./questions/23445703/… – Bhavani Ravi Commented May 26, 2021 at 13:28
• Just tried, I was hoping it would work, but unfortunately, it does not. I tried to do '{% static 'images/my_image_2.png' %}' and decodeURI('{% static 'images/my_image_2.png' %}') - both still do not remove the strange formatting – MattG Commented May 26, 2021 at 13:41

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

if your Django is running on port 8000 use

http://localhost:8000/static/images/my_image_2.png

all your static files are served using baseurl/static/{your file path}

I solved it by doing:

document.getElementById(id+"dynamicImage").src = ("{% static 'images/my_image_2.png' %}").replace(/&/g, "&");

.replace(/&/g, "&") will replace all & with &. The/ and /g is regex to replace all.

I can't ment yet, But I did it this way with AWS, So here it is, If it is just what you want the users to see, You don't have to modify the actual Images stored in digital ocean, All you need to do is to generate a base64 image URL and send that "copy" image to the frontend and then use JS to do whatever it is u want the user to do, Even if you wish to modify the image, You can always save the Image to it's original name and set the "file_over_write" to True

To do this, you could set the static URL as a global variable and reference it later on. Basically:

// Initial setting of the global static URL
var staticURL = "{% static '' %}";

// Function to retrieve the full URL given the 
function getStatic (URL) {
    let fullURL = staticURL + '/' + URL;
    return fullURL;
};


// Example to get the URL of an image
document.getElementByID('image').src = getStatic('images/my_image');

In the example above, I used the function getStatic to retrieve a static file at any point using javascript. To change an image, you just retrieve another URL and set that as the source file for the image.

my first thought after reading your question is plain javascript is very limited for web interactivity

you might find a better solution by importing a framework like vuejs.

generally speaking, Vuejs conditional rendering could offer a faster and cleaner javascript solution

to start using vuejs in HTML file you need to only insert this

<script src="https://unpkg./vue/dist/vue.js"></script> in the HTML file.

this is a quick sample of how you can isolate the URL data images from the code that displays the data, since the display code is isolated from the URL code, you can adjust the URL data to connect with Django settings.py

<meta charset="UTF-8">

<script src="https://unpkg./vue/dist/vue.js"></script>

<html>

<style>
*{
  background-color:#e8eae6;
 
}
</style>


<div id="app">
    <h2>vuejs testing </h2>
    <div class="row">
        <img width="400px" height="400px" v-for="img in images" v-bind:src="img"/>
      </div>


   
</div>
  
  <script>


new Vue({
  el: '#app',
 
data() {
    return {
        images:["https://images.unsplash./photo-1534258915617-99d572d9f684?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80", 
        "https://images.unsplash./photo-1559825481-12a05cc00344?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0ZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash./photo-1621786505687-9a36ca978b27?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
    ]
    }
}

});


  </script>


</html>

for more info about v-for directive syntax

the other solution, which I'm not sure how practical or if it would be counterproductive for your use case,

but if I had this problem I will just move the images to different storage like google storage system; they have fine-grained control for every single collection.

so it depends on how you want to organize these images

本文标签： htmlHow to include Django static URL using JavaScriptStack Overflow