解决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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
vue.js简单配置axios的方法详解
Dec 13 Javascript
详解vue axios二次封装
Jul 22 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 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
一个简洁的多级别论坛
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
Maps Javascript
2007/01/22 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
python获得一个月有多少天的方法
2015/06/04 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
查摆问题对照检查材料
2014/08/28 职场文书
软件测试专业推荐信
2014/09/18 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript