解决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动态创建、删除表格示例代码
Aug 07 Javascript
js控制input框只读实现示例
Jan 20 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
深入理解vue Render函数
Jul 19 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
企业员工集体活动方案
2014/08/17 职场文书
第二次离婚起诉书
2015/05/18 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
全网非常详细的pytest配置文件
2022/07/15 Python