Layui表格加载在线图片!!亲测成功!!
自己在做项目的时候,不想把所有的图片都放在工程目录下,因此引用网上的图片在线地址,结果出现了如下情况,图片无法加载,且请求为200正常
其实表格使用后端传来的url地址需要自定义一个template,同时需要覆盖一下原本的css,具体看下面的操作。
一、html头部加入meta
<meta name="referrer" content="no-referrer">
二、Layui表格代码
注意看imageUrl那一行
{
type: 'checkbox'}
,{
field:'carId', title:'汽车编号', width:120, sort: true}
,{
field:'carName', title:'汽车名称', width:219}
,{
field:'dailyPrice', title:'每日租金', width:135}
//d我们可以理解为每一个元素都放入,我自己理解为循环里的i
,{
field:'imageUrl', title:'汽车图片', width:135, templet: '<div><img src="{
{d.imageUrl}}"></div>'}
,{
field:'brand', title:'汽车品牌', width:135, edit: 'text'}
,{
field:'productYear', title:'出厂年份', width:135}
,{
field:'productCountry', title:'出厂地', width:135}
,{
field:'color', title:'颜色', width:135}
// ,{field:'createTime', title:'创建时间', width:190}
,{
title:'操作', toolbar: '#barDemo', width:100 }
三、css代码
<style>
.layui-table-cell{
text-align:center;
height:auto;
white-space:normal;
}
</style>
最终成功效果如下,收工!