解决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获取flash加载的百分比的实现代码
May 25 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
js实现橱窗展示效果
Jan 11 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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学习之PHP表达式
2006/10/09 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
详解Python的单元测试
2015/04/28 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
让世界充满爱观后感
2015/06/10 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python