LayUI 框架本地路径图片显示到表格问题

最新推荐文章于 2024-05-01 11:06:27 发布

可乐冰r

最新推荐文章于 2024-05-01 11:06:27 发布

阅读量994

点赞数 3

分类专栏：学习记录文章标签： layui javascript json

本文链接：https://blog.csdn.net/m0_60961113/article/details/125692749

版权

学习记录专栏收录该内容

7 篇文章 1 订阅

订阅专栏

前言

LayUI框架组件下载地址：Layui - 经典开源模块化前端 UI 组件库

注意：

1、路径一定要正确！！！

2、我使用的是JSON字符串，没有使用数据库。

3、最好使用2.7版本以上的LayUI框架，因为下面的代码有一个用到2.7版本新出的属性

4、写方式一return img这个字符串时一定要仔细，很容易出错，所以推荐使用方式二。

结果截图

图片显示有两种方式

方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui---表格用法</title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<table id="demo" lay-filter="test"></table>
		
		<script>
		  //展示已知数据
		  layui.use('table', function(){
		    var table = layui.table;
		    
		    //第一个实例 layui的table的ajax返回的json格式是有要求的
		    table.render({
		      elem: '#demo',
		      height: 312,
			  lineStyle: 'height: 100px', // 设置单元格高度（2.7版本新加的）
		      url: 'ajax/user.json', //数据接口
		      page: true, //开启分页
		      cols: [[ //表头
		        {field: 'id', title: 'ID', width:200, sort: true, fixed: 'left'},
		        {field: 'name', title: '用户名', width:200},
		        {field: 'price', title: '价格', width:200, sort: true},
		        {field: 'images', title: '图片', width:200, templet:function(data){
					// console.log(data.images);
					return "<img src=' " + data.images + "' style='width:200;height:200'/>"
				}}
		      ]]
		    });
		  });
		</script>

	</body>
</html>

方式二（推荐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui---表格用法</title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<script src="layui/layui.js"></script>
		
	</head>
	<body>
		<table id="demo" lay-filter="test"></table>
		
		<script>
		  //展示已知数据
		  layui.use('table', function(){
		    var table = layui.table;
		    
		    //第一个实例 layui的table的ajax返回的json格式是有要求的
		    table.render({
		      elem: '#demo',
		      height: 312,
			  lineStyle: 'height: 100px', // 设置单元格高度（2.7版本新加的）
		      url: 'ajax/user.json', //数据接口
		      page: true, //开启分页
		      cols: [[ //表头
		        {field: 'id', title: 'ID', width:200, sort: true, fixed: 'left'},
		        {field: 'name', title: '用户名', width:200},
		        {field: 'price', title: '价格', width:200, sort: true},
				{field: 'images', title: '图片', width:200, templet:"#imgtmp"}
		      ]]
		    });
		  });
		</script>
		
		<script type="text/javascript" id="imgtmp">
			<img src="{{d.images}}" style="width:200;height:200"/>
		</script>
	</body>
</html>

user.json

{
	"code":0,
	"msg":"",
	"count":100,
	"data":[
			{"name":"华为P40","id":1,"price":"200","images":"img/1.jpg"},
			{"name":"U盘","id":2,"price":"20","images":"img/2.jpg"}
	]
}

如果有问题的话，可以评论或者私聊哈，看到了一定会回复滴！加油！！！