解决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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
详解Vue之计算属性
Jun 20 Javascript
vue 封装面包屑组件教程
Nov 16 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP解决中文乱码
2017/04/28 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
七年级地理教学反思
2014/01/26 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
个人实习生的自我评价
2014/02/16 职场文书
经济担保书范文
2014/04/02 职场文书
师德演讲稿范文
2014/05/06 职场文书
中班下学期个人总结
2015/02/12 职场文书
2016新年问候语大全
2015/11/11 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏