Get api response 보여주기

[null59]

안녕하세요. response로 아래처럼 오는 GET API가 있습니다.
{
“imageUrls”: [“https://1.png”, “https://2.png”, …]
}

이것들을 화면에서 이미지로 보여주고 싶은데 방법이 있을까요?

[hbkim]

안녕하세요.
아래와 같이 format: image를 사용하시면 되겠습니다.

  blocks:
    - type: http
      name: API 조회 결과
      axios:
        method: GET
        url: ...
      # rowsPath: rows
      columns:
        imageUrls:
          format: image
          width: 400px
          height: 120px
          thumbnail: true
          thumbnailWidth: 100px
          flex: true          
          style: > 
            border-radius: 10px    

여러개 이미지를 여러개 row로 쪼개서 보여주고 싶은 경우에는 아래와 같이 responseFn 으로 처리하실 수 있습니다.

    - type: http
      name: API 조회 결과
      axios:
        method: GET
        url: ...
      # rowsPath: rows   
      responseFn: |
        const imageUrls = rows[0].imageUrls;  // rows 배열의 첫 번째 객체에서 imageUrls 추출
        const result = imageUrls.map((url, index) => {
          return {
            value: index,  // 이미지의 인덱스
            label: `Image ${index + 1}`,  // 라벨: 'Image 1', 'Image 2' 등
            image_url: url  // 실제 이미지 URL
          };
        });
        return result;
      columns:
        image_url:
          format: image
          width: 400px
          height: 120px
          thumbnail: true
          thumbnailWidth: 100px
          flex: true          
          style: > 
            border-radius: 10px    

추가로 도움이 필요하시면 말씀주세요.
감사합니다

[null59]

답변 감사합니다