VUE.js 提交表单后刷新img src

Question

我在使用 vue.js2 时遇到了以下问题。
提交表单后，我想刷新图片src。
提交表单后，后台会生成一张新的图表图片。
这张新图表图像取代了旧图表图像，但是 URL 保持不变。
要更新图像，我在图像 src 上使用 v-bind 并将其绑定到数据变量之一。
提交表单前显示的起始图像是 placeholder.jpg.
收到响应后，我调用 changeChart 方法将其更新为 graph.jpg.
此操作有效并且图像已更新

我在这里面临的问题是当我更新其中一个值并再次单击提交时，图像没有改变。
但是，当我首先单击清除方法并在下次提交时再次将 chart_url 设置为 placeholder.jpg 时，图像会正确更改。

<v-img 
    v-bind:src=this.chart_url 
</v-img>


<script>
export default {
    name: "CenterComponent",
      data: function () {
        return {
            value1: "",
            value2: "",
            value3: "",
            output: null,
            chart_url: "http://127.0.0.1:5000/media/pictures/placeholder.jpg",
    }
},

methods:{
    clear(){
        this.value1 = "";
        this.value2 = "";
        this.value3 = "";
        this.output = "";
        this.chart_url = "http://127.0.0.1:5000/media/pictures/placeholder.jpg";
    },
    changeChart(){
        this.chart_url = "http://127.0.0.1:5000/media/pictures/graph.jpg"
    },
    submitForm(){
        fetch("http://127.0.0.1:5000/predict",{
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                value1: this.value1,
                value2: this.value2,
                value3: this.value3
            })
        }
        ).then(response => {
            if (response.ok) {
                return response.json();
            }
        }).then(data => {
            this.output = data["prediction"];
            this.changeChart();
        });
    }
},
};
</script>

Answer 1

正如您所说，第一次提交表单时，您实际上将 url 从 'placeholder.jpg' 更改为 'graph.jpg'，并且在随后的提交中它仍然是 'graph.jpg'.

这意味着浏览器不会在缓存时每次更改为 'graph.jpg' 时再次获取该图像。要让浏览器获取新图像，您可以尝试 cache-busting，方法是在 changeChart 方法中的 url 末尾附加一个随机数。您实际上是在告诉浏览器它没有这张图片，所以去获取它吧。

changeChart(){
    const randomNumber = Math.floor(Math.random() * 1000)
    this.chart_url = `http://127.0.0.1:5000/media/pictures/graph.jpg?cachebust=${randomNumber}`
},

这将附加一个 1-1000 之间的随机数，但您显然可以根据您的用例改进它。

或者，在处理图像时在服务器上创建一个唯一的图像名称，并在 POST 调用的响应中 return 这个新名称。这样你就不会遇到这个问题了。

VUE.js 提交表单后刷新img src

VUE.js Refreshing img scr after submitting a form

vue.js

vuejs2

vuetify.js