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: '<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>

最终成功效果如下,收工!
成功效果图

猜你喜欢

转载自blog.csdn.net/weixin_48244108/article/details/121568385
今日推荐