在 Vue JS 中的表格内显示图像以及基本 url (Laravel 5.2)
Posted
技术标签:
【中文标题】在 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 错误以上是关于在 Vue JS 中的表格内显示图像以及基本 url (Laravel 5.2)的主要内容,如果未能解决你的问题,请参考以下文章
无法在 laravel 中使用 vue.js 显示存储目录中的图像