Flutter中如何将NFT的Base64 SVG数据URL转为可显示图片？

第一步：验证解码内容是否为HTML #

先确认你的猜测，把Data URL中的base64部分（去掉data:image/svg+xml;base64,前缀）解码出来查看实际内容：

// 替换成你的完整base64字符串
String base64Content = "PHN2ZyB3aWR0...";
String decodedContent = utf8.decode(base64.decode(base64Content));
print(decodedContent);

如果打印结果是HTML代码，说明确实不是图片，需要从HTML中提取真实图片资源。

第二步：从HTML中提取真实图片 #

如果解码后是HTML，找到其中的<img>标签，提取src属性值：

• 若src是普通HTTP/HTTPS链接，直接用Flutter的Image.network()加载：

  Image.network("https://example.com/real-nft-image.png");
  

• 若src是另一个Data URL，去掉前缀后重新解码，再根据图片类型处理（PNG/JPG用Image.memory，SVG用第三方包）

第三步：如果是SVG格式的问题 #

如果解码后确实是SVG，但Image.memory报错，因为Flutter原生不支持SVG，需要用第三方包flutter_svg：

1. 在pubspec.yaml中添加依赖：

   dependencies:
     flutter_svg: ^2.0.9 # 可替换为最新版本
   

2. 导入包并加载SVG：

   import 'package:flutter_svg/flutter_svg.dart';
   
   // 解码base64内容
   final svgBytes = base64.decode(base64Content);
   // 用SvgPicture.memory显示
   SvgPicture.memory(svgBytes);
   

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