若依后台表格展示图片问题

1.示例代码
$(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "微信banner图",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: 'id'
                },
                {
                    field: 'name',
                    title: 'banner名称'
                },
                {
                    field: 'imgUrl',
                    title: 'banner图地址',
                    formatter: function (value, row, index) {
                        return '<img src="' + value + '" width="150" height="100">';
                    }
                },
                {
                    field: 'jumpUrl',
                    title: 'banner跳转url'
                },
                {
                    field: 'orderNum',
                    title: '排序'
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    field: 'updateTime',
                    title: '更新时间'
                },
                {
                    field: 'delFlag',
                    title: '是否删除',
                    formatter: function (value, row, index) {
                        return value == true ? "是" : "否";
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
2.问题及解决

imgUrl字段表格列不能正常展示图片,尝试使用layui官方的图片展示解决办法无法解决,加上formatter即可

formatter: function (value, row, index) {
   return '<img src="' + value + '" width="150" height="100">';
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML和CSS是Web开发中两个重要的技术栈,它们不负责后台功能逻辑的处理,而是负责前端的展示和样式设计。 HTML(Hypertext Markup Language)是一种用于创建网页结构的标记语言。通过使用不同的标签和属性,可以定义网页的结构、文本、链接、图片表格等内容。HTML负责将网页内容按照结构进行排版,并与其他技术(如CSS和JavaScript)进行交互。 CSS(Cascading Style Sheets)是一种用于描述网页样式的语言。通过使用不同的样式规则和属性,可以为HTML元素添加背景、边框、颜色、大小等视觉效果。CSS可以让网页变得美观、易读和易于维护,有利于增强用户体验。 后台开发是指开发Web应用程序的服务器端代码,它负责处理用户请求、与数据库交互、进行业务逻辑计算等任务。后台开发通常使用一种编程语言(如Java、Python、PHP等)和一种服务器环境(如Node.js、Tomcat等),与前端通过网络进行交互。 HTML和CSS负责前端的呈现部分,而后台开发则负责处理服务器端的逻辑部分。它们是前后端分离开发模式中的两个组成部分,配合使用可以实现一个完整的Web应用程序。 总结来说,HTML和CSS是前端技术,负责网页的结构和样式设计;而后台开发是处理服务器端的逻辑部分,负责与前端进行数据交互和业务计算。HTML和CSS与后台开发相互配合,可以实现一个功能完善、用户友好的Web应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闲来也无事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值