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

Question

我正在尝试通过 AJAX 请求向我自己的 API 加载一些 items 并使用 Vue.js 在我的网站上显示它们。它已经工作正常并使用下面的代码显示图像，除了我在 开发人员控制台 :

中收到 404 错误的问题

GET http://example.com/images/%7B%7B%image_file%20%7D%7D 404 (Not Found)

在 XHR 请求完成之前

XHR finished loading: GET "http://example.com/api/getItems".

HTML（使用 blade 语法）：

<div id="items-wrapper">
    <div v-repeat="items">
       <img src="http://example.com/images/@{{ image_file }}">
    </div>
</div>

JavaScript:

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

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

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

对我来说，看起来 <img src="http://example.com/images/@{{ image_file }}"> 在 XHR 请求完成之前呈现，因此抛出 404 错误。

有什么办法可以避免控制台出现 404 错误吗？非常感谢！

Answer 1

由 @kreitje 来自 laracasts.com 解决：

来自 Vue.js 文档 (http://vuejs.org/api/directives.html#v-attr)

在元素上设置 src 属性时，您应该使用 v-attr 而不是 mustache 绑定。您的模板在被 Vue.js 编译之前由浏览器解析，因此当浏览器尝试将其作为图像的 URL.

获取时，小胡子绑定将导致 404。

所以我改成了

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

它工作得很好。

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

Vue.js: v-repeat generates 404 console error before successfully fetching data via AJAX

html

ajax

http-status-code-404

vue.js