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

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

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

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

 
 
{
  "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这个包含图片的层级一样

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

{
status:1,
msg:success,
   data:{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号,默认0
  "data": [   //相册包含的图片,数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "http://resources/imgs/1524563654856j42A.jpg", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
  }
}

这里就需吧返回的路径改为:photos: json.data


猜你喜欢

转载自blog.csdn.net/yufengaotian/article/details/80084480
今日推荐