解决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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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 生成WML页面方法详解
2009/08/09 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
js压缩利器
2007/02/20 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
python实现聊天小程序
2018/03/13 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
详解python中的闭包
2020/09/07 Python
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
函授大专自我鉴定
2013/11/01 职场文书
班组长的岗位职责
2013/12/09 职场文书
团支部推优材料
2014/05/21 职场文书
小学课外活动总结
2014/07/09 职场文书
党代会心得体会
2014/09/04 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2015新学期开学寄语
2015/02/26 职场文书
企业工会工作总结2015
2015/05/13 职场文书
企业文化学习心得体会
2016/01/21 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python