开发者社区问答正文

自定义页面中，怎么循环展示字段里的多图？

表单里图片字段，有多图；需要在定义页面默认展示最新3张图片

const { data = [] } = res;
const hotelList = data.map((item1) => {
  return {

    cityName: item1.selectField_m7blyatq, // 城市 selectField_m7blyatq
    hotelName: item1.selectField_m7blyatr, // 酒店名称
    inDate: this.utils.formatter('date', item1.dateField_m7blyatp, 'YYYY-MM-DD'), // 入住日期
    freeDate: this.utils.formatter('date', item1.dateField_m7blyatx, 'YYYY-MM-DD'), //免取消日期
    remark: item1.textField_m7blyato,//备注
    hotelImage: item1.imageField_m7blyats,//酒店图片

  };

展开

收起

游客rzak5pbhaxnnq 2025-03-04 13:36:49 68 版权

来自：钉钉宜搭

1 条回答

写回答

取消提交回答

派大星星星x

对应字段的类型修改成自定义，在内容制定渲染里面去写img组件。hotelImage获取的时候应该把item1.imageField_m7blyats通过JSON.parse()转成对象数组。然后在renderCell函数里面去写自定义内容，即return一个div里面包裹着img组件

//数据源里面的hotelImage转一下
hotelImage: JSON.parse(item1.imageField_m7blyats)
//后面就是在renderCell函数里面去操作，需要先判断下对应的图片是否有值
if(value.length!=0){ //判断有值的情况下去遍历输出img
  return <div>
    {value.map((image) => (<img src={image.previewUrl} />))}
  </div>;
}else{  //没值的情况下可以输出无，也可以不写else
  return <div>无</div>;
}