图像 URI 未在 Flutter ios 中加载

问题描述

我正在创建一个本机应用程序，我在其中使用图像 URI 而不是 png 或 jpg 图像只是为了减小尺寸。但问题是图像 URI 未在 ios 中加载/显示。我在 android 和 web 上尝试过，它可以正常工作。

//Image URI
var _hello_Image_Uri =       "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ5NS45NCA0OTUuOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTQxNC43MzcgNTkuOThjLTkuNTA2IDM1LjQ4NS0zNy43MzEgMTQwLjgyOS00Ny45MSAxNzguODIgNy45MTYgNy45MTYgMTcuNTA1IDE2Ljk3IDI1LjE0IDM0LjU2IDEwLjA3NCAyMy4wNzYgOCAzNS42ODkgOCA5MC41OCAwIDcyLjktNTkuMSAxMzItMTMyIDEzMmgtNTZjLTczLjA5IDAtMTMyLTU5LjI5OS0xMzItMTMyIDAtNjcuNDM5IDAgMTIyLjEwNSAwLTE2NCAwLTE3LjY3OSAxNC4zMTktMzIgMzItMzIgMTcuNjcgMCAzMiAxNC4zMyAzMiAzMnYtMjhjMC0yMy44OTQgMjIuODY4LTQxLjIzNCA0Ni4wNS0zNC41Ny0yMi4yNTktODMuMDU5LTE2Ljg0My02Mi44NDgtMjQuNjgtOTIuMS0yLjU3LTkuNi0xLjAxLTE5LjM0IDMuNTktMjcuMzIgMTUuOTU5LTI3LjU2NiA1Ny42NDUtMjIuMzE4IDY1Ljk2IDguNjggNC45NyAxOC41NTguMDQ5LjE5MiA0OC41OCAxODEuMzFoMTcuMDhjMi4wMzMtNy41ODUgNDEuOTktMTU2LjcwMyA0NC42NC0xNjYuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2Y5Y2ZhYyIgZGF0YS1vcmlnaW5hbD0iI2Y5Y2ZhYyIgc3R5bGU9IiI+PC9wYXRoPjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2ZmZTRjYyI+PHBhdGggZD0ibTIzMS45NjcgMTkxLjk0di0yMGMwLTE5LjQ2LTEwLjc0LTM2LjQ1LTI2LjYtNDUuMzZsLTMxLjktMTE0LjgzYzE4Ljc1NS0yMC43MjMgNTMuOTUxLTEyLjk2OCA2MS40MiAxNC44OCA2LjA1MSAyMi41OTYtMS42NjUtNi4yMDUgNDQuMjkgMTY1LjmxeiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im00MTQuNzM3IDU5Ljk4Yy05LjY0OCAzNi4wMTItMzQuMjE4IDEyNy43MTYtNDMuMTMgMTYwLjk4LTEwLjA1My0xMC4wNjYtMjYuNDk4LTI5LjAyLTU4Ljg0LTI5LjAyaC03LjkzYzcuMjUxLTI3LjA2MSAzNS42NjUtMTMzLjEwNiA0MC4zNS0xNTAuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im0xOTkuOTY3IDIyMy45NGMwIDE2LjU4IDUuNjQgMzEuODcgMTUuMSA0NC4wNi0zLjA4NiAxMy40NDUtMTMuNjQgMjMuOTktMjcuMSAyNy4wNS0xNi4wMy0zLjY0LTI4LTE3Ljk4LTI4LTM1LjExdi0xMTcuOTRjMjMuNTk5LTE1LjgwMiA1NiAuOTY3IDU2IDI5Ljk0djI0LjI5Yy05LjYwNiA1LjUyMy0xNiAxNS44NzctMTYgMjcuNzF6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTE0My45NjcgMTk5Ljk0djcyYzAgMTQuODk2LTEwLjE4NSAyNy40NS0yNCAzMC45OS0xMy44LTMuNTUtMjQtMTYuMDgtMjQtMzAuOTl2LTk5LjcyYzIxLjE1OS0xMi4yMTggNDggMi45OTQgNDggMjcuNzJ6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTM5OS45NjcgMzYzLjk0YzAgNDAuNjYtMTguMzggNzcuMDItNDcuMjkgMTAxLjI0LTE4LjE3IDkuNDMtMzguODIgMTQuNzYtNjAuNzEgMTQuNzZoLTU2Yy03Mi41NjIgMC0xMzItNTguNzgtMTMyLTEzMnYtMjguNjdjMTYuOTYgMi44NyAzNC4zMDItMy41MzkgNDUuMzYtMTcuMjIuMDc4LS4xMTYuMDU3LS4wNzIuMTItLjA0IDI2LjY5NSAxOS40NjkgNjQuODI0IDkuMjYzIDc4LjIxLtixLjM2IDIyLjAzIDE3LjI4MyA0Mi4wNzQgMTUuMjkgNjIuMjggMTUuMjktNTAuMjM4IDE4LjA3LTg2LjIwMyA2NC41MDctODkuNjkgMTE5LjMtLjI3NSA0LjY2NCAzLjM3NCA4LjMzOSA3Ljc2IDguNDcgNC4zMi4xMyA3LjkzLTMuMjEgOC4yMS03LjUzIDMuNjY3LTU3LjE4MSA0Ny40MDktMTAzLjY2OSAxMDMuNzUtMTExLjE4IDAtOS4wNzEtMi45MS0xNy41NjEtNy43OC0yNC40MS0uNTktLjkyOCAzLjY1Ny0uNjUtNDAuMjItLjY1LTMxLjA2MiAwLTU2LTI1LjIwNy01Ni01NiAwLTguODUzIDcuMTYtMTYgMTYtMTZoODAuOGMxNC44NiAwIDI5LjEgNS45IDM5LjYgMTYuNCAxOS4zMjEgMTkuMzIxIDMwLjgwMiAyOC43NTIgMzkuNiA0OS4wMiAxMC4wNzQgMjMuMDc2IDggMzUuNjg5IDggOTAuNTh6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=";


        Container(
              width: 120,height: 120,padding: EdgeInsets.all(16),decoration: Boxdecoration(
                borderRadius: BorderRadius.circular(14),color: Colors.lightGreen,),child: Image.network(_hello_Image_Uri),)

哪里

Image.network(_hello_Image_Uri),

问题


════════ Exception caught by image resource service ════════════════════════════
The following ArgumentError was thrown resolving an image codec:
Invalid argument(s): No host specified in URI file:///PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ5NS45NCA0OTUuOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTQxNC43MzcgNTkuOThjLTkuNTA2IDM1LjQ4NS0zNy43MzEgMTQwLjgyOS00Ny45MSAxNzguODIgNy45MTYgNy45MTYgMTcuNTA1IDE2Ljk3IDI1LjE0IDM0LjU2IDEwLjA3NCAyMy4wNzYgOCAzNS42ODkgOCA5MC41OCAwIDcyLjktNTkuMSAxMzItMTMyIDEzMmgtNTZjLTczLjA5IDAtMTMyLTU5LjI5OS0xMzItMTMyIDAtNjcuNDM5IDAgMTIyLjEwNSAwLTE2NCAwLTE3LjY3OSAxNC4zMTktMzIgMzItMzIgMTcuNjcgMCAzMiAxNC4zMyAzMiAzMnYtMjhjMC0yMy44OTQgMjIuODY4LTQxLjIzNCA0Ni4wNS0zNC41Ny0yMi4yNTktODMuMDU5LTE2Ljg0My02Mi44NDgtMjQuNjgtOTIuMS0yLjU3LTkuNi0xLjAxLTE5LjM0IDMuNTktMjcuMzIgMTUuOTU5LTI3LjU2NiA1Ny42NDUtMjIuMzE4IDY1Ljk2IDguNjggNC45NyAxOC41NTguMDQ5LjE5MiA0OC41OCAxODEuMzFoMTcuMDhjMi4wMzMtNy41ODUgNDEuOTktMTU2LjcwMyA0NC42NC0xNjYuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2Y5Y2ZhYyIgZGF0YS1vcmlnaW5hbD0iI2Y5Y2ZhYyIgc3R5bGU9IiI+PC9wYXRoPjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2ZmZTRjYyI+PHBhdGggZD0ibTIzMS45NjcgMTkxLjk0di0yMGMwLTE5LjQ2LTEwLjc0LTM2LjQ1LTI2LjYtNDUuMzZsLTMxLjktMTE0LjgzYzE4Ljc1NS0yMC43MjMgNTMuOTUxLTEyLjk2OCA2MS40MiAxNC44OCA2LjA1MSAyMi41OTYtMS42NjUtNi4yMDUgNDQuMjkgMTY1LjmxeiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im00MTQuNzM3IDU5Ljk4Yy05LjY0OCAzNi4wMTItMzQuMjE4IDEyNy43MTYtNDMuMTMgMTYwLjk4LTEwLjA1My0xMC4wNjYtMjYuNDk4LTI5LjAyLTU4Ljg0LTI5LjAyaC03LjkzYzcuMjUxLTI3LjA2MSAzNS42NjUtMTMzLjEwNiA0MC4zNS0xNTAuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im0xOTkuOTY3IDIyMy45NGMwIDE2LjU4IDUuNjQgMzEuODcgMTUuMSA0NC4wNi0zLjA4NiAxMy40NDUtMTMuNjQgMjMuOTktMjcuMSAyNy4wNS0xNi4wMy0zLjY0LTI4LTE3Ljk4LTI4LTM1LjExdi0xMTcuOTRjMjMuNTk5LTE1LjgwMiA1NiAuOTY3IDU2IDI5Ljk0djI0LjI5Yy05LjYwNiA1LjUyMy0xNiAxNS44NzctMTYgMjcuNzF6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTE0My45NjcgMTk5Ljk0djcyYzAgMTQuODk2LTEwLjE4NSAyNy40NS0yNCAzMC45OS0xMy44LTMuNTUtMjQtMTYuMDgtMjQtMzAuOTl2LTk5LjcyYzIxLjE1OS0xMi4yMTggNDggMi45OTQgNDggMjcuNzJ6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTM5OS45NjcgMzYzLjk0YzAgNDAuNjYtMTguMzggNzcuMDItNDcuMjkgMTAxLjI0LTE4LjE3IDkuNDMtMzguODIgMTQuNzYtNjAuNzEgMTQuNzZoLTU2Yy03Mi41NjIgMC0xMzItNTguNzgtMTMyLTEzMnYtMjguNjdjMTYuOTYgMi44NyAzNC4zMDItMy41MzkgNDUuMzYtMTcuMjIuMDc4LS4xMTYuMDU3LS4wNzIuMTItLjA0IDI2LjY5NSAxOS40NjkgNjQuODI0IDkuMjYzIDc4LjIxLtixLjM2IDIyLjAzIDE3LjI4MyA0Mi4wNzQgMTUuMjkgNjIuMjggMTUuMjktNTAuMjM4IDE4LjA3LTg2LjIwMyA2NC41MDctODkuNjkgMTE5LjMtLjI3NSA0LjY2NCAzLjM3NCA4LjMzOSA3Ljc2IDguNDcgNC4zMi4xMyA3LjkzLTMuMjEgOC4yMS03LjUzIDMuNjY3LTU3LjE4MSA0Ny40MDktMTAzLjY2OSAxMDMuNzUtMTExLjE4IDAtOS4wNzEtMi45MS0xNy41NjEtNy43OC0yNC40MS0uNTktLjkyOCAzLjY1Ny0uNjUtNDAuMjItLjY1LTMxLjA2MiAwLTU2LTI1LjIwNy01Ni01NiAwLTguODUzIDcuMTYtMTYgMTYtMTZoODAuOGMxNC44NiAwIDI5LjEgNS45IDM5LjYgMTYuNCAxOS4zMjEgMTkuMzIxIDMwLjgwMiAyOC43NTIgMzkuNiA0OS4wMiAxMC4wNzQgMjMuMDc2IDggMzUuNjg5IDggOTAuNTh6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdhlsZT0iIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=

解决方法

Image.network 顾名思义是用于通过网络获取的图像。如果您查看 Image.network 的实现，您会发现它会尝试向 HTTP 客户端发出 GET 请求。由于您显示的 URI 字符串中没有主机，因此此请求按预期失败。 Source。

您在这里尝试做的事情有很多问题。使用 SVG 减小图像大小是一个好主意，因为我猜您有一个矢量源，但要了解 Flutter 不原生支持 SVG。使用 canvaskit 时它可以在网络上工作，但不适用于其他平台。您将需要使用 flutter_svg 包，并且可以按照 this SO answer 找到一种使其在网络上也能正常工作的方法。我会使用 SvgPicture.string 或 SvgPicture.asset 构造函数而不是它们在答案中显示的内容，以便没有不必要的网络请求。这可能比它的价值更麻烦，并且支持将比使用光栅图像更不稳定，但这取决于您。另请注意，使用此包和 canvaskit 渲染器会增加整个应用程序的大小，这可能不值得仅用于少数图像。

来自链接答案的代码：

class CrossPlatformSvg {
  static Widget asset(
    String assetPath,{
    double width,double height,BoxFit fit = BoxFit.contain,Color color,alignment = Alignment.center,String semanticsLabel,}) {
    // `kIsWeb` is a special Flutter variable that just exists
    // Returns true if we're on web,false for mobile
    if (kIsWeb) {
      return Image.network(
        assetPath,width: width,height: height,fit: fit,color: color,alignment: alignment,);
    } else {
      return SvgPicture.network(
        assetPath,placeholderBuilder: (_) => Container(
          width: 30,height: 30,padding: EdgeInsets.all(30),child: CircularIndicator(),),);
    }
  }
}

您当前的尝试也不必要地增加需要存储的数据量，因为您使用的是 base64 编码字符串。 Base64 编码会使需要存储的数据量增加约 1.5 倍，这与您减小大小的意图背道而驰。

dart flutter-ios ios ios