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