图片 URI 未加载 flutter ios

Question

我正在创建一个本机应用程序，我在其中使用图像 URI 而不是 png 或 jpg 图像只是为了减小尺寸。但问题是图像 URI 不是 ios 中的 loading/showing。我在 android 上试过，网络正常。

这是代码

//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=

Answer 1

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

您在这里尝试做的事情有很多问题。使用 SVG 减小图像大小是个好主意，因为我猜你有一个矢量源，但请理解 Flutter 不原生支持 SVG。使用 canvaskit 时它可能在网络上工作，但不适用于其他平台。您将需要使用 flutter_svg package and can follow SO 答案来找到一种使其在网络上也能正常工作的方法。我会使用 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,
        width: width,
        height: height,
        fit: fit,
        color: color,
        alignment: alignment,
        placeholderBuilder: (_) => Container(
          width: 30,
          height: 30,
          padding: EdgeInsets.all(30),
          child: CircularIndicator(),
        ),
      );
    }
  }
}

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

图片 URI 未加载 flutter ios

Image URI not loading in flutter ios

ios

dart

flutter

flutter-ios