使用Amplify Storage.get()批量获取S3图片URL时返回Promise问题求解

大家好，我尝试从S3 Bucket获取单条图片URL，如下代码运行完全正常：

const [imageURL, setImageURL] = useState("");
  const {
    title,
    content,
    imagePath, // 这个imagePath就是S3的key
  } = article.article;

  useEffect(() => {
    const getImage = async () => {
      try {
        const imageAccessURL = await Storage.get(imagePath);
        setImageURL(imageAccessURL); // 这样我就能拿到URL
      } catch (error) {
        console.error("从S3获取图片出错", error);
        setImageURL("");
      }
    };
    getImage();
  }, [imagePath]);

现在我需要在列表遍历渲染时批量获取S3 Bucket的图片URL，当前实现代码如下：

export default function ArticleComponent() {
  const handleImage = async (imagePath) => {
    try {
      const imageAccessURL = await Storage.get(imagePath);
      return imageAccessURL; // 我不知道怎么用状态或者其他方法处理返回值
    } catch (error) {
      console.error("从S3获取图片出错", error);
    }
  };

  const renderList = articles.map((article) => {
    const {
      id,
      content,
      title,
      imagePath,
    } = article;

    return (
      <Paper className={classes.paper} key={id} elevation={5}>
        <img src={handleImage(imagePath)} alt="" /> // 我想在这里拿到URL
      </Paper>
    );
  });

  return (
    <Box>
      {renderList}
    </Box>
  )
}

但最终<img src={handleImage(imagePath)} alt="" />处拿到的返回值是Promise对象，而非实际的图片URL。已知文章列表中每条文章都对应存储了S3 bucket的key即imagePath字段，且必须使用await Storage.get(key)方法才能获取真实可访问的URL。单条数据场景下可以使用useState存储获取结果，但列表遍历场景下我暂时没有可行的实现思路，希望大家可以帮忙提供解决方案，谢谢。

问题核心是异步函数默认返回Promise实例，不能直接作为img标签的src属性值，这里提供两种常用的实现方案：

方案1：拆分子组件（推荐） #

把每个文章项抽成独立的子组件，每个子组件单独管理自身的图片URL状态，逻辑和你之前单条获取的实现完全一致，复用性高，各组件的图片加载互不阻塞，体验更好。

子组件代码 #

import { useState, useEffect } from 'react';
import Paper from '@mui/material/Paper';

const ArticleItem = ({ article, classes }) => {
  const [imageURL, setImageURL] = useState("/default-placeholder.png"); // 初始值可设为占位图地址
  const { id, imagePath } = article;

  useEffect(() => {
    if (!imagePath) return;
    const getImage = async () => {
      try {
        const url = await Storage.get(imagePath);
        setImageURL(url);
      } catch (err) {
        console.error(`获取文章${id}的S3图片出错`, err);
      }
    };
    getImage();
  }, [imagePath, id]);

  return (
    <Paper className={classes.paper} key={id} elevation={5}>
      <img src={imageURL} alt="文章配图" />
    </Paper>
  );
};

父组件改造 #

import Box from '@mui/material/Box';
import ArticleItem from './ArticleItem';

export default function ArticleComponent({ articles, classes }) {
  return (
    <Box>
      {articles.map(article => (
        <ArticleItem
          key={article.id}
          article={article}
          classes={classes}
        />
      ))}
    </Box>
  );
}

方案2：父组件批量拉取 #

如果不想拆分子组件，可以在父组件维护一个文章ID-图片URL的映射表，列表数据变化时批量拉取所有图片地址。

完整代码 #

import { useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';

export default function ArticleComponent({ articles, classes }) {
  const [imageUrlMap, setImageUrlMap] = useState({});

  useEffect(() => {
    const batchGetImages = async () => {
      const urlMap = {};
      for (const article of articles) {
        if (!article.imagePath) {
          urlMap[article.id] = "/default-placeholder.png";
          continue;
        }
        try {
          urlMap[article.id] = await Storage.get(article.imagePath);
        } catch (err) {
          console.error(`获取文章${article.id}的S3图片出错`, err);
          urlMap[article.id] = "/default-placeholder.png";
        }
      }
      setImageUrlMap(urlMap);
    };
    batchGetImages();
  }, [articles]);

  return (
    <Box>
      {articles.map(article => (
        <Paper className={classes.paper} key={article.id} elevation={5}>
          <img src={imageUrlMap[article.id] || ""} alt="文章配图" />
        </Paper>
      ))}
    </Box>
  );
}

方案对比 #

• 方案1适合长列表场景，加载性能更好，逻辑解耦，优先推荐使用
• 方案2适合短列表、需要统一控制加载状态的场景，缺点是所有图片加载完成后才会统一更新视图，单个资源加载慢会影响整体体验

内容的提问来源于stack exchange，提问作者Shen