amis学习笔记-代码分析⑥_amis直接打开"type": "images-CSDN博客

本文链接：https://blog.csdn.net/m0_55689825/article/details/121571453

本文详细分析了amis框架中images组件的使用，包括如何通过source或name属性关联数据，以及如何配置预览图和原图地址。在数据格式方面，介绍了支持的纯文本数组和对象数组，并提供了配置示例。文章指出，在初始化数据时，images组件不支持直接配置，需要配合其他组件或手动初始化数据域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2021SC@SDUSC

一、前言

本文主要分析amis框架中，数据表达中，images图片集

图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service、Form或CRUD这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示。

二、代码分析

基本用法

通过 source 关联上下文数据，或者通过 name 关联。

"type": "page",

"data": {

"imageList": [

"body": [

{

"type": "images",

"source": "${imageList}"

{

"type": "divider"

{

"type": "images",

"name": "imageList"

}

]

}

也可以静态展示，即不关联数据固定显示。

值格式

除了支持纯文本数组以外，也支持对象数组，如：

Array<{
    image: string; // 小图，预览图
    src?: string; // 原图
    title?: string; // 标题
    description?: string; // 描述
    [propName:string]: any; // 还可以有其他数据
}>

配置预览图地址

需要设置对象中预览图地址的key值为image

{

"type": "page",

"data": {

"images": [

{

"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",//图片地址

"a": "aaa1",

"b": "bbb1"

{

"image": "https://internal-amis-res.cdn.bcebos.co