在 Vue JS 中的表格内显示图像以及基本 url (Laravel 5.2)

Posted 2023-02-22

【中文标题】在 Vue JS 中的表格内显示图像以及基本 url (Laravel 5.2)

【英文标题】：Display images inside table in Vue JS along with base url (Laravel 5.2)

【发布时间】：2016-11-11 20:06:35

【问题描述】：

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

获取类别：

fetchCategory: function()

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

这是显示类别的表格：

<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 " ></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？

【参考方案1】：

你应该绑定src属性：

<img :src="' url('/') /' + category.icon" >

【参考方案2】：

试试这样：

<td>!!html::image('path/category.icon')!!</td>

【讨论】：

category是一个Vue对象，不能这样用。

但是你用的是blading，category.icon的值是多少？

category.icon 给出了一个相对路径，如 assets/images/categories/TOOZ6xW8V2JA.jpg 它显示正确，但在控制台中也显示 404 错误