Image URI not loading in flutter ios

Issue

I’m creating a native app where I’m using image URI instead of png or jpg image just to reduce the size. But the issue is that the image URI is not loading/showing in ios. I tried on android and the web it’s working.

Here is the code

//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),
            )

where

Image.network(_hello_Image_Uri),

Issue

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

Solution

Image.network is for images obtained through a network as the name implies. If you look at the implementation of Image.network, you’ll find that it will attempt to make a GET request with an HTTP client. Since there is no host in the URI string you show, this request fails as expected. Source.

There’s a lot going wrong with what you’re trying to do here. Reducing image size by using SVG is a good idea since I guess you had a vector source, but understand that Flutter does not native support for SVG. It may work on the web when using canvaskit, but not for other platforms. You will need to use the flutter_svg package and can follow this SO answer to find a way to make it work on web as well. I would use the SvgPicture.string or SvgPicture.asset constructors instead of what they show in their answer so that there are no unecessary network requests. This may be more trouble than it’s worth and support will be more flakey than using a raster image, but that’s up to you. Also be aware that using this package and the canvaskit renderer will increase overall application size, which may not be worth it for only a few images.

Code from linked answer:

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(),
        ),
      );
    }
  }
}

---

Your current attempt also unnecessarily increases the amount of data that needs to be stored because you’re using a base64 encoded string. Base64 encoding will increase the amount of data that needs to be stored by ~1.5 times, which goes against your intention of reducing size.

Answered By – Christopher Moore

Answer Checked By – Katrina (FlutterFixes Volunteer)