layui.table图片显示不全和404问题
1.图片显示不全
在使用layui.table组件中,加载的图片显示不全,需重新定义CSS如下:
.layui-table-cell{
height: auto!important;
white-space: normal;
}
2.图片显示,路径404
在组件中加载图片,本人使用的是如:
{field: 'image', title: '商品图片', align:'center',width:, templet:'<div><img href="{{ d.image }}"></div>',style:'height:50px;'}
结果:图片在表格中显示,但浏览器会另外加载一张图片

使用模板改正就没有这个问题:
首先定义模板,(因为是laravel框架,所以需要@来避免被解析):
<script type="text/html" id="imgTpl">
<img src="@{{ d.avatar }}">
</script>
再在layui.table中定义:
{field: 'avatar', title: '头像', align:'center',width:150, templet:'#imgTpl'}
问题解决
layui.table图片显示不全和404问题的更多相关文章
- matlab保存图片成eps格式不全,导致latex中图片显示不全的问题
我们经常会遇到这样的问题.用将matlab生成的图保存EPS格式后,用GSVIEW打开后,可以看到图片显示不全.遇到这种情况是,我们可以使用dvipdf——dvips的方法来生成PDF,这样生成的pd ...
- jquery easyui datagrid/table 右边线显示不全
<table id="dg" style="height:400px"></table> 右边线显示不全 解决:在外面套一个panel, ...
- 手机浏览PC版页面出现背景图片显示不全的问题解决方案
手机浏览PC版页面出现背景图片显示不全 给定宽高的值
- Word 固定行间距公式图片显示不全、Word Eculid 字体导致行间距过大、Word 行间距过大
1. 前言 1.有些文章行间距要求是固定值,比如,固定值15磅,但是这样会导致有些公式.图片显示不全.例如下图: 2.Euclid这个字体很容易导致行间距超大. 2. 解决方案 1.把固定值15磅改为 ...
- word公式图片显示不全的问题
最近处理文档遇到比较棘手的问题,就是单行显示的公式和图片都显示不全,高度撑不起来,会被其他行的内容遮挡. 图片估计是对齐方式照成的,公式调了很久也没有办法.最后找了一个临时折衷的办法: 插入表格,然后 ...
- 关于word图片显示不全
问题:在编辑word时,在其中一行插入一张图片,但是显示不全. 原因:给文字行距设置成 [ 固定值 ]的原因. 解决方案:先删除图片,在插入图片的一行右键--> 段落,弹出对话框,找到设置行距的 ...
- layui开关switch显示不全问题
先看效果: 开关显示不全,高度也不对称. 解决: 在所用到的html/jsp中自己加css .layui-form-switch { width: 52px; height: 23px; } 再看效果 ...
- (转)Word插入图片显示不全怎么办
https://jingyan.baidu.com/article/e73e26c0c0081c24adb6a73d.html 现在告诉大家解决办法. 方法一: A.单击选中图片,然后在“开始”选项卡 ...
- android 自定义ratingbar 图片显示不全的解决方案
在res/style中自定义评分条: <!-- 自定义评分条 --> <style name="roomRatingBar" parent="@andr ...
随机推荐
- So, How About UMD模块-Universal Module Definition
在ES6模块解决方案出现之前,工具库或包常用三种解决方案提供对外使用的接口,最早是直接暴露给全局变量,比如我们熟知的Jquery暴露的全局变量是$,Lodash对外暴露的全局变量是_,后来出现了AMD ...
- 简单使用sp_executesql 参数化
declare @totalCount1 int output declare @id1 varchar(10) declare @strsql1 nvarchar(max)=N'' declare ...
- pycharm创建scrapy项目教程及遇到的坑
最近学习scrapy爬虫框架,在使用pycharm安装scrapy类库及创建scrapy项目时花费了好长的时间,遇到各种坑,根据网上的各种教程,花费了一晚上的时间,终于成功,其中也踩了一些坑,现在整理 ...
- 029 Es面试小节
1.大纲 Es是什么?处理哪种业务逻辑用的多? Es类比数据库是什么? 对于数据库的字段.表等,在es中叫什么? Es的refresh把数据写到哪里? Es的数据如何变成检索和聚合索引的? Es的fl ...
- scala_2
一.scala类 . 在java中程序的入口是main方法->定义在class中 在scala中程序的入口是main方法->定义在object对象中 案例一: class People { ...
- 远程服务器数据交互技术:rsync,scp,mysqldump
远程服务器间数据文件交互,可用技术:rsync,scp 速度:rsync是非加密传输,比scp快 安全:scp为加密传输 备份体量:rsync只更新差异部分,可以做增量和全量备份.scp为全量 传输方 ...
- Centos7使用kubeadm部署kubernetes-1.11.2
1.安装方式 1. 传统方式,以下组件全部运行在系统层面(yum或者rpm包),都为系统级守护进程 2. kubeadm方式,master和node上的组件全部运行为pod容器,k8s也为pod ...
- oracle行转列、列转行、连续日期数字实现方式及mybatis下实现方式
转载请注明出处:https://www.cnblogs.com/funnyzpc/p/9977591.html 九月份复习,十月份考试,十月底一直没法收心,赶在十一初 由于不可抗拒的原因又不得不重新找 ...
- Numpy 基础运算2
# -*- encoding:utf-8 -*- # Copyright (c) 2015 Shiye Inc. # All rights reserved. # # Author: ldq < ...
- TypeScript 函数-Lambads 和 this 关键字的使用
let people = { name:["a","b","c","d"], /* getName:function() ...