Flutter如何兼容展示SVG、PNG、JPG等多种格式的图片

核心实现思路 #

通过封装通用图片组件，根据图片格式自动匹配对应的渲染引擎，业务层无需区分图片格式，直接传入路径即可使用。

具体实现步骤 #

• 先确保已引入flutter_svg依赖到pubspec.yaml中，用于处理SVG格式渲染
• 封装通用的UniversalImage组件，内置格式判断逻辑：
  1. 提取图片路径的后缀判断格式，无后缀场景可配合接口返回的格式字段判断
  2. SVG格式调用SvgPicture的对应方法渲染
  3. PNG、JPG、WebP、GIF等位图格式调用Flutter原生Image的对应方法渲染
• 按需扩展参数，适配占位图、错误图、缓存、样式调整等需求

代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class UniversalImage extends StatelessWidget {
  final String path;
  final double? width;
  final double? height;
  final BoxFit? fit;
  final Widget Function(BuildContext)? placeholderBuilder;
  final Widget Function(BuildContext, Object, StackTrace?)? errorBuilder;

  const UniversalImage(
    this.path, {
    super.key,
    this.width,
    this.height,
    this.fit,
    this.placeholderBuilder,
    this.errorBuilder,
  });

  @override
  Widget build(BuildContext context) {
    final bool isSvg = path.toLowerCase().endsWith('.svg');
    final bool isNetwork = path.startsWith(RegExp(r'https?://'));

    if (isSvg) {
      if (isNetwork) {
        return SvgPicture.network(
          path,
          width: width,
          height: height,
          fit: fit ?? BoxFit.contain,
          placeholderBuilder: placeholderBuilder,
        );
      } else {
        return SvgPicture.asset(
          path,
          width: width,
          height: height,
          fit: fit ?? BoxFit.contain,
          placeholderBuilder: placeholderBuilder,
        );
      }
    } else {
      if (isNetwork) {
        return Image.network(
          path,
          width: width,
          height: height,
          fit: fit ?? BoxFit.contain,
          loadingBuilder: placeholderBuilder != null 
              ? (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return placeholderBuilder!(context);
                }
              : null,
          errorBuilder: errorBuilder,
        );
      } else {
        return Image.asset(
          path,
          width: width,
          height: height,
          fit: fit ?? BoxFit.contain,
          errorBuilder: errorBuilder,
        );
      }
    }
  }
}

使用示例 #

// 加载本地SVG
UniversalImage('assets/icons/ic_success.svg', width: 80, fit: BoxFit.contain)
// 加载本地JPG
UniversalImage('assets/images/cover.jpg', width: double.infinity, fit: BoxFit.cover)
// 加载网络PNG
UniversalImage('https://example.com/avatar.png', width: 48, height: 48, fit: BoxFit.cover)

注意事项 #

• 若图片链接无明确后缀，可通过接口返回的mimeType或者自定义格式字段做判断，无需强依赖路径后缀
• 可根据业务需求继续扩展参数，比如SVG的颜色替换、位图的缓存策略等
• 该方案无额外冗余依赖，性能和原生渲染保持一致

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