解决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 相关文章推荐
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
React简单介绍
May 24 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
使用javascript做在线算法编程
May 25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
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中的外观模式facade pattern
2018/02/05 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js跳转页面方法总结
2014/01/29 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Django model反向关联名称的方法
2018/12/15 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
高一自我鉴定
2013/12/17 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
学生实习证明范文
2014/09/28 职场文书
社区母亲节活动总结
2015/02/10 职场文书
上诉答辩状范文
2015/05/22 职场文书
地震捐款简报
2015/07/21 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js