使用layer.photos点击不显示图片，没反应，解决方案

68 阅读 0 评论 45 点赞

我是靠谱客的博主大胆帽子，这篇文章主要介绍使用layer.photos点击不显示图片，没反应，解决方案，现在分享给大家，希望可以做个参考。

这项目中运用了layui这个css框架，在使用组件弹出相册时，遇到一个问题，按照官网文档，返回的json数据格式也是按照官网来的，但是不显示图片，这里有一个坑，如果你是吧官网例子粘贴过来修改如下：

复制代码

1
2
3
4
5
6
$.getJSON('/jquery/layer/test/photos.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
});

后台返回json的数据类似这样的：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [
//相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "http://resources/imgs/1524563654856j42A.jpg", //原图地址
"thumb": "" //缩略图地址
}
]
}

可能不报错，但是没反应，这是为什么呢。原因是：json文件中的注释要去掉，去掉，去掉，然后奇迹就出现了

注意点二：就是photos: json（这里json是返回的数据实体，结构就上上面的，如果后台返回的是不是上面的路径就要注意了）

这里要注意返回数据json的层级关系，相册id，title,start等必须和data这个包含图片的层级一样

好比返回的数据结构是下面这样：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
status:1,
msg:success,
   data:{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [
//相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "http://resources/imgs/1524563654856j42A.jpg", //原图地址
"thumb": "" //缩略图地址
}
]
}
}