Layui表格加载在线图片

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: '
'
} ,{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代码


最终成功效果如下,收工!
Layui表格加载在线图片_第1张图片

你可能感兴趣的:(前端技术,layui,css,前端)