解决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 防止刷新,后退,关闭
Aug 07 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
uni-app之APP和小程序微信授权方法
May 09 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JavaScript实现多球运动效果
Sep 07 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
详解php命令注入攻击
2019/04/06 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
javascript动态加载二
2012/08/22 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python opencv 直方图反向投影的方法
2018/02/24 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python网络编程之五子棋游戏
2020/05/14 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
少年闰土教学反思
2014/02/22 职场文书
葬礼司仪主持词
2014/03/31 职场文书
文明礼仪标语
2014/06/13 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers