[JavaScript知识库]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>

最终成功效果如下，收工！