解决layer图标icon不加载的问题


Posted in Javascript onSeptember 04, 2019

之前在项目中使用layer弹框感觉体验很好,这次的项目中就引入了,但是引入之后,弹出层如下图:

代码:

layer.msg("密码不正确!", {icon:5,time:1000});

解决layer图标icon不加载的问题

并没有显示出图标!

F12查看才发现如下报错:

http://127.0.0.1:8020/xxx/js/theme/default/layer.css?v=3.1.1 net::ERR_ABORTED layer.js

于是找到 layer.js,搜索 layer.css ,会搜索到两处地方,修改第二处,代码如下:

....n=(a?"modules/layer/":"theme/")+"default/layer.css?v="+r.v+i;return a....

修改为

....n=(a?"modules/layer/":"theme/")+"../../css/layer.css?v="+r.v+i;return a....

也就是让他的路径指向你layer.css存放的文件夹下。

但是刷新页面发现提示说找不到 icon.png 图片 ! 于是去layer官网下载layer,之后找到该图片,图片如下:

解决layer图标icon不加载的问题

把他拷贝到图片存放的路径下,之后打开layer.css ,搜索 icon.png ,并把该图片路径指向你的图片存放文件夹,代码如下:

.layui-layer-ico{background:url(../img/icon.png) no-repeat}

在此刷新页面发现ok了,如图所示:

解决layer图标icon不加载的问题

当然了,还有一个最简单的办法就是,到官网下载layer,把他全部拷贝到项目中,之后在页面只需要引入:

<script type="text/javascript" src="layer/layer.js" ></script>

如上代码就可以。

以上这篇解决layer图标icon不加载的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
理解Javascript闭包
Nov 01 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
ionic实现底部分享功能
May 11 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
JSX在render函数中的应用详解
Sep 04 #Javascript
关于layui的动态图标不显示的解决方法
Sep 04 #Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 #Javascript
简单谈谈javascript高级特性
Sep 04 #Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 #Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 #Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 #Javascript
You might like
php socket方式提交的post详解
2008/07/19 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
js不是基础的基础
2006/12/24 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
工程业务员岗位职责
2013/12/31 职场文书
清洁工表扬信
2014/01/08 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
爱心倡议书范文
2014/05/12 职场文书
小学教师师德承诺书
2014/05/23 职场文书
作风建设剖析材料
2014/10/06 职场文书
商业计划书格式、范文
2019/03/21 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL