解决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代码复用模式详解
Nov 07 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 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
递归列出所有文件和目录
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php比较相似字符串的方法
2015/06/05 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JS动画效果代码3
2008/04/03 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JS定义函数的几种常用方法小结
2019/05/23 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
django-csrf使用和禁用方式
2020/03/13 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
社会公德演讲稿
2014/05/20 职场文书
企业法律事务工作总结
2015/08/11 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers