Insert JS value to Django template

Question

As I am exploring Web Development, I require small assistance here. In my case, I have a folder with static images. To display an image I need to get data from API, let's say, some pointer on which particular image should be displayed.

<img class="some_img" src="{% static 'image_PIONTER.png' %}">

I'm getting that pointer using JS in a separate file script.js. To achieve what I want I need to replace POINTER in the src attribute of html with some actual word (lets say 'Captain') to get an image 'image_Captain.png' from static files. How could I get this POINTER from a JS to django template? As I already know, Django renders its templates before any client side (JS code) executed. So I cant just pass this attribute or even a part of html as $().html or $().append. It won't work. Picture should be displayed on a button click, preferably without refreshing the whole page. Thanks in advance

Answer 1

Try using Vue.js if you haven't. You can pull it from a CDN with

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<button @click = "someFunction()">Click me</button>
<div id = "vueApp">
<img v-if = "result" v-bind:src = "result">
</div>

Then just add a script tag like so and create a Vue instance(replace things inside two '+' with your values):

<script>
var search = new Vue({
        el: '#vueApp',
        delimiters: ["[[", "]]"],
        data(){
            return{
                result: ""
            }
        },
        mounted(){
            console.log("This is mounted")
        },
        methods:
        {   
          someFunction: function()
          {
             axios.get(`+SomeAPI+`).then((response) => 
                        {
                        this.result = (response.data)
                        }).catch((function(error)
                        {
                        console.log(error);
                        }
                        ));
                        
          }
        }
    })
</script>