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

7 篇文章 0 订阅

这项目中运用了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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值