將 JS 值插入 Django 模板

Question

由於我正在探索 Web 開發，我在這里需要一些幫助。 就我而言，我有一個包含 static 圖像的文件夾。 要顯示圖像，我需要從 API 獲取數據，比如說，應該顯示哪個特定圖像的一些指針。

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

我在單獨的文件 script.js 中使用 JS 獲取該指針。 為了實現我想要的，我需要將 html 的 src 屬性中的 POINTER 替換為一些實際單詞（比如說“船長”），以從 static 文件中獲取圖像“image_Captain.png”。 如何從 JS 到 django 模板中獲取此指針？ 正如我已經知道的那樣，Django 在執行任何客戶端（JS 代碼）之前呈現其模板。 所以我不能只將這個屬性甚至 html 的一部分作為 $().html 或 $().append 傳遞。 它行不通。 圖片應該在按鈕點擊時顯示，最好不要刷新整個頁面。 提前致謝

Answer 1

如果沒有，請嘗試使用 Vue.js。 您可以使用以下命令從 CDN 中提取它

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

然后像這樣添加一個腳本標簽並創建一個Vue實例（用你的值替換兩個'+'內的東西）：

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