React中如何将API返回的图片URL正确赋值给img标签src属性

你的代码存在三个核心问题，导致图片地址无法正确传入src完成渲染：

• 异步函数不能直接作为src的传值：loadImage是async函数，调用后返回的是Promise对象，而img标签的src属性只接受字符串格式的URL，拿到Promise对象自然无法解析渲染图片。
• loadImage函数本身没有正确返回值：你在函数内部新建了Promise但从未调用resolve抛出结果，接口返回的图片地址只被打印到了控制台，没有对外返回有效值。
• 渲染阶段直接触发异步请求是React的错误用法：React渲染是同步执行的，不会等待异步请求返回再完成渲染，且每次重渲染都会重复触发接口调用，既拿不到有效值还会产生大量冗余请求。

推荐两种可落地的实现方式，根据业务场景选择即可。 #

方案1：批量拉取后统一渲染（适合列表长度固定、数据量不大的场景） #

1. 首先修正loadImage函数，让它正确返回图片地址：

async function loadImage(token_id) {
  const options = { method: 'GET' };
  const res = await fetch(
    'https://api.opensea.io/api/v1/asset/0xd782abhdgc76h6ljgfdedhhhhg6fcfhf17da/' +
      token_id +
      '/?include_orders=false',
    options
  );
  const data = await res.json();
  return data.image_preview_url;
}

2. 在组件内新增状态存储token_id和图片地址的映射关系，在nftdata加载完成后统一拉取所有图片地址：

// 组件顶部引入对应hooks
import { useState, useEffect } from 'react';

// 组件内部新增状态
const [imageMap, setImageMap] = useState({});

// 监听nftdata变化，批量拉取图片
useEffect(() => {
  async function loadAllImages() {
    const urlMap = {};
    for (const nft of nftdata) {
      try {
        urlMap[nft.token_id] = await loadImage(nft.token_id);
      } catch (err) {
        console.error('NFT图片加载失败:', err);
        urlMap[nft.token_id] = ''; // 可替换为自定义占位图地址
      }
    }
    setImageMap(urlMap);
  }
  if (nftdata?.length) {
    loadAllImages();
  }
}, [nftdata]);

3. 渲染时直接从状态中读取图片地址，替换原来直接调用loadImage的写法：

<img
  className='card-img-top'
  src={imageMap[result.token_id] || '占位图地址'}
  alt={result.token_id}
/>

方案2：封装独立图片组件（适合长列表场景，避免一次性发起过多请求） #

如果NFT列表很长，批量拉取会导致首屏过慢，可以封装单独的图片组件，每个组件独立管理自己的加载状态：

// 独立的NFT图片组件
const NftCardImage = ({ tokenId, alt, className }) => {
  const [imgSrc, setImgSrc] = useState('');

  useEffect(() => {
    // 标记组件挂载状态，避免组件卸载后更新状态引发内存泄漏
    let isMounted = true;
    loadImage(tokenId)
      .then(url => {
        if (isMounted) setImgSrc(url);
      })
      .catch(err => console.error('图片加载失败:', err));
    
    return () => {
      isMounted = false;
    };
  }, [tokenId]);

  return <img className={className} src={imgSrc || '占位图地址'} alt={alt} />;
};

在列表渲染处直接替换原有img标签即可：

<NftCardImage
  className='card-img-top'
  tokenId={result.token_id}
  alt={result.token_id}
/>

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