如何在NFT页面中使用API返回的图片文件？

当API直接返回图片文件（二进制数据）时，你需要调整axios的请求配置，让它正确处理二进制数据，再将其转换为浏览器可识别的图片地址。

方法1：使用URL.createObjectURL（推荐） #

这种方法性能更优，无需将二进制数据转为base64字符串，适合处理较大的图片文件。

修改你的代码如下：

import { useState, useEffect } from 'react';
import axios from 'axios';

function NFTPage() {
    const [imageUrl, setImageUrl] = useState(null);

    async function fetchData() {
        try {
            // 设置responseType为'blob'，让axios返回二进制Blob对象
            const { data } = await axios.get('https://us-central1-nft-cloud-functions.cloudfunctions.net/hotCollections', {
                responseType: 'blob'
            });
            // 将Blob转换为浏览器可直接访问的URL
            const url = URL.createObjectURL(data);
            setImageUrl(url);
        } catch (error) {
            console.error('获取图片失败:', error);
        }
    } 

    useEffect(() => {
        fetchData();
        // 组件卸载时释放URL资源，避免内存泄漏
        return () => {
            if (imageUrl) {
                URL.revokeObjectURL(imageUrl);
            }
        };
    }, []);

    return (
        <div>
            {imageUrl && <img src={imageUrl} alt="NFT Collection" />}
        </div>
    );
}

export default NFTPage;

方法2：转换为Base64格式 #

如果需要将图片数据以字符串形式存储（比如存入状态或本地存储），可以用FileReader将Blob转为base64格式：

async function fetchData() {
    try {
        const { data } = await axios.get('https://us-central1-nft-cloud-functions.cloudfunctions.net/hotCollections', {
            responseType: 'blob'
        });
        // 用FileReader读取Blob并转换为base64
        const reader = new FileReader();
        reader.onload = () => {
            setImageUrl(reader.result);
        };
        reader.readAsDataURL(data);
    } catch (error) {
        console.error('获取图片失败:', error);
    }
}

额外说明 #

如果你的API实际返回的是包含图片URL字段的NFT集合数据，而非直接返回图片二进制，可先查看控制台console.log(data)的输出结果，确认数据结构后再针对性处理。

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