宜搭自定义页面表格控件，如何通过远程api获取图片上传里面的多张图片，在表格页面展示出来多张图片

展开

收起

cheng07 2023-11-11 15:30:35 193 0

来自：钉钉宜搭

2 条回答

写回答

取消提交回答

sunrr

2000元阿里云代金券免费领取，2核4G云服务器仅799元/3年，新老用户都有优惠，立即抢购>>>

要实现这个功能，你需要先创建一个自定义页面表格控件，然后通过远程API获取图片上传里面的多张图片，最后在表格页面展示出来多张图片。以下是具体的实现步骤：

创建自定义页面表格控件：

在你的项目中，找到对应的页面文件（如：index.html），然后在文件中添加一个表格元素，例如：
```
<table id="imageTable">
  <thead>
    <tr>
      <th>图片</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
```

编写JavaScript代码，通过远程API获取图片上传里面的多张图片：

在你的项目中，找到对应的JavaScript文件（如：main.js），然后在文件中编写以下代码：

function getImages() {
  // 调用远程API获取图片列表的URL
  const apiUrl = 'https://api.example.com/getImageList';

  // 发送请求获取图片列表数据
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      // 解析返回的图片列表数据
      const imageList = data.images;

      // 遍历图片列表，将图片添加到表格中
      imageList.forEach(image => {
        const tableRow = document.createElement('tr');
        const tableData = document.createElement('td');
        const imgElement = document.createElement('img');
        imgElement.src = image.url; // 设置图片的URL
        imgElement.alt = image.name; // 设置图片的描述信息
        tableData.appendChild(imgElement); // 将图片添加到表格单元格中
        tableRow.appendChild(tableData); // 将表格单元格添加到表格行中
        document.getElementById('imageTable').querySelector('tbody').appendChild(tableRow); // 将表格行添加到表格中
      });
    })
    .catch(error => {
      console.error('Error fetching images:', error);
    });
}

调用getImages()函数，获取图片并展示在表格中：

在需要展示图片的地方，调用getImages()函数，例如在页面加载完成后：
```
window.addEventListener('DOMContentLoaded', getImages);
```

这样，当你的项目运行时，就会通过远程API获取图片上传里面的多张图片，并在表格页面展示出来。

2023-11-12 09:59:18

赞同展开评论打赏

Star时光

2000元阿里云代金券免费领取，2核4G云服务器仅799元/3年，新老用户都有优惠，立即抢购>>>
要在宜搭自定义页面的表格控件中显示从远程API获取的多张图片，可以采用以下方法：
1. 获取图片资源：首先，需要获取远程API返回的图片URL集合。可以通过在自定义页面的JavaScript代码中调用API接口获取。注意，图片URL集合应该是一个数组。
2. 创建表格：在宜搭自定义页面中，创建一个新的表格控件。表格中包含一个专门用于显示图片的单元格。
3. 显示图片：为每个图片单元格添加一个图片标签，并且使用JavaScript代码将获取到的图片URL填充到该标签的src属性中。
具体的实现方式取决于实际需求和现有的JavaScript编程知识。可以参考以下示例代码：
```
// 获取图片URL集合
var imageUrlArray = getApiImages();

// 循环遍历图片URL集合
for (var i = 0; i < imageUrlArray.length; i++) {
    var imageElement = document.createElement('img');
    // 将图片URL赋值给img标签的src属性
    imageElement.src = imageUrlArray[i];
    // 将img元素插入表格对应的单元格中
    tableRow.insertCell(i).appendChild(imageElement);
}
```
注意，上述代码只是一个简单的示例。实际使用时，需要确保图片加载正确，并对可能出现的问题进行适当的处理（例如错误重试机制）。如果需要更复杂的功能，建议查阅更多的编程教程和文档进行学习。
2023-11-11 22:07:56

赞同展开评论打赏