Html Vue.js:v-repeat在通过AJAX成功获取数据之前生成404控制台错误

我正试图通过AJAX请求将一些

项目

加载到我自己的API中，并使用

Vue.js

在我的站点上显示它们。它已经可以正常工作，并使用下面的代码显示图像，但我在开发人员控制台中遇到404错误的问题除外：

GEThttp://example.com/images/%7B%7B%image_file%20%7D%7D 404（未找到）

在XHR请求完成之前

XHR已完成加载：GET”http://example.com/api/getItems“

HTML（带刀片语法）：

对我来说，

似乎是在XHR请求完成之前呈现的，因此引发了404错误

如何避免控制台中的404错误？提前多谢

由laracasts.com解决：

来自Vue.js文档（）

在元素上设置src属性时，应该使用v-attr而不是mustache绑定。在Vue.js编译模板之前，浏览器会对模板进行解析，因此当浏览器尝试将其作为图像的URL获取时，胡子绑定将导致404

所以我把它改成了

<img v-attr="src: 'http://example.com/images/' + image_file">

它工作得非常好

new Vue({
    el: '#items-wrapper',

    ready: function() {
        this.fetchItems();
    },

    methods: {
        fetchItems: function() {
            this.$http.get('api/getItems', function(items) {
                this.$set('items', items);
            })
        }
    }
});

<img v-attr="src: 'http://example.com/images/' + image_file">