React Native中Image组件无法显示特定NFT URI图片求助

针对你遇到的单个Alchemy NFT CDN URI无法在React Native Image组件中加载（浏览器及其他NFT图片正常）的问题，以下是具体排查和解决步骤：

1. 模拟浏览器请求头发起请求 #

React Native Image组件默认的请求头可能被CDN拦截，可手动添加浏览器兼容的请求头获取图片并转为Base64显示：

import axios from 'axios';
import { useState, useEffect } from 'react';
import { Image, StyleSheet } from 'react-native';

const NFTComponent = () => {
  const [imageUri, setImageUri] = useState(null);

  const fetchNFTImage = async () => {
    try {
      const response = await axios.get('https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076', {
        responseType: 'arraybuffer',
        headers: {
          'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
        }
      });
      const base64 = Buffer.from(response.data, 'binary').toString('base64');
      setImageUri(`data:image/png;base64,${base64}`);
    } catch (err) {
      console.error('图片加载失败:', err);
    }
  };

  useEffect(() => {
    fetchNFTImage();
  }, []);

  return (
    imageUri && (
      <Image
        style={styles.NFTImage}
        resizeMode={'cover'}
        source={{ uri: imageUri }}
      />
    )
  );
};

const styles = StyleSheet.create({
  NFTImage: {
    width: '100%',
    height: '100%',
    borderRadius: 25,
    aspectRatio: 1,
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

export default NFTComponent;

2. 检查图片格式兼容性 #

若图片为WebP格式，iOS端React Native默认不支持，需在Podfile中添加依赖：

target 'YourAppName' do
  # 其他配置...
  pod 'SDWebImageWebPCoder'
end

执行pod install后重新编译项目。

3. 清除图片缓存或强制刷新 #

RN Image组件的缓存可能保留了失败请求记录，可通过添加随机参数强制刷新：

<Image
  style={styles.NFTImage}
  resizeMode={'cover'}
  source={{ uri: "https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076?" + Date.now() }}
/>

或调用Image.cache.clear()清除全部缓存。

4. 排查样式冲突 #

你的NFTImage样式同时设置width: '100%'、height: '100%'和aspectRatio: 1，可能导致布局异常。可先简化样式测试：

NFTImage: {
    width: 300,
    height: 300,
    borderRadius: 25,
}

5. 替换为第三方图片库 #

使用react-native-fast-image提升兼容性，它对CDN图片、特殊格式的支持更完善：

npm install react-native-fast-image

import FastImage from 'react-native-fast-image';

<FastImage
  style={styles.NFTImage}
  resizeMode={FastImage.resizeMode.cover}
  source={{
    uri: "https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076",
    headers: { 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36' },
  }}
/>

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