在 Vue JS 中显示 table 内的图像以及基础 url (Laravel 5.2)

Question

好吧，我能够正确显示图像，但它仍然无缘无故地在控制台中给我 javascript 错误。这是我的代码：

正在获取类别：

fetchCategory: function(){

            this.$http.get('get_category').then(function(response){
                this.$set('categories',response.json());
            });
        }

这里是 table 显示类别：

<table class="table table-bordered table-responsive table-striped example1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Category Name</th>
            <th>Icon</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="category in categories">
            <td>@{{ category.id }}</td>
            <td>@{{ category.name }}</td>
            <td><img src="{{url('/')}}/@{{ category.icon }}" width="150px"></td>
            <td>Edit | Delete</td>
        </tr>
    </tbody>
</table>

它正确显示图像，但是 javascript 控制台仍然显示 2 404 错误，表明图像 url GET http://localhost/project/%7B%7B%20category.icon%20%7D%7D 404（未找到）

我应该忽略这个错误吗？或者有没有其他方法可以在图像路径中包含 base url？

Answer 1

这样试试：

<td>{!!HTML::image('path/category.icon')!!}</td>

Answer 2

您应该绑定 src 属性：

<img :src="'{{ url('/') }}/' + category.icon" width="150px">

在 Vue JS 中显示 table 内的图像以及基础 url (Laravel 5.2)

Display images inside table in Vue JS along with base url (Laravel 5.2)

javascript

laravel

vue.js

laravel-5.2

vue-resource