I used to get flutter web output with [flutter build web --web-renderer html] command which also displayed images, but now it is not like that and there is no alternative for this. I tried many commands but they do not display images.

notice: I don't have an error in my code I just want to use this flutter build web --web-renderer html
Because this command would then show the final output of the photos.
also, I tried to build with flutter build web --releasebut the image doesn't display.

my index.html

<!DOCTYPE html>
<html>
<head>
  <base href="/">

  <meta charset="UTF-8">

  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="shandiz">
  <link rel="apple-touch-icon" href="logo_fonttype.png?version=46"> <!-- Versioned -->

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="logo_fonttype.png?version=46"> <!-- Versioned -->

  <title>شاندیز میوه</title>
  <link rel="manifest" href="manifest.json?version=46"> <!-- Versioned -->

  <style>
    /* Splash screen container */
    .splash-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* تنظیم ارتفاع به اندازه کل صفحه */
    }

    .splash-text img {
      width: 250px; /* سایز متوسط برای تصویر */
      height: auto; /* تناسب حفظ شود */
    }

    /* General styles */
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      color: white;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    /* Splash screen container */
    .splash-container {
      text-align: center;
      animation: fadeOut 2s ease-in-out 3s forwards;
    }

    /* Text animation */
    .splash-text {
      font-size: 2rem;
      font-weight: bold;
      opacity: 0;
      animation: fadeIn 2s ease-in-out forwards, scaleUp 2s ease-in-out 0.5s forwards;
    }

    /* Keyframes for fade in animation */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* Keyframes for scaling the text */
    @keyframes scaleUp {
      0% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1.2);
      }
    }

    /* Keyframes for fade out the whole splash */
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

    .no-internet-message {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.8); /* پس‌زمینه مشکی */
      color: white; /* رنگ متن سفید */
      padding: 10px;
      text-align: center;
      font-size: 18px;
      display: none; /* به طور پیش‌فرض مخفی است */
    }
  </style>

  <script>
    const serviceWorkerVersion = ""2827488426""; // Auto-injected by Flutter build process

    // Check and handle internet connection status
    function checkInternetConnection() {
       const messageElement = document.getElementById('no-internet-message');
       if (!navigator.onLine) {
         messageElement.style.display = 'block';
       } else {
         messageElement.style.display = 'none';
       }
    }

    // Add listeners for online and offline events
    window.addEventListener('online', checkInternetConnection);
    window.addEventListener('offline', checkInternetConnection);

    // Initial check when page loads
    window.addEventListener('load', checkInternetConnection);

    function hideSplashScreen() {
      const splashContainer = document.getElementById('splash-container');
      if (splashContainer) {
        splashContainer.style.display = 'none';
      }
    }

    // Hide splash screen after Flutter's first frame is ready
    window.addEventListener('flutter-first-frame', function() {
      hideSplashScreen();
    });

    // Cache busting logic
    function clearCache() {
      if ('caches' in window) {
        caches.keys().then(function(names) {
          for (let name of names) {
            caches.delete(name);
          }
        });
      }
    }

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for (let registration of registrations) {
          registration.unregister().then(clearCache);
        }
      });
    }

    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator) {
        const seconds = new Date().getTime();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", 'version.json?version=46' + seconds, true);
        xmlhttp.onload = function() {
          if (xmlhttp.status === 200) {
            const remoteVersion = xmlhttp.responseText;
            const localVersion = window.localStorage.getItem('buildNumber');
            if (localVersion !== remoteVersion) {
              clearCache();
              window.localStorage.setItem('buildNumber', remoteVersion);
            }
          }
        };
        xmlhttp.send();
      }
    });
  </script>
  <script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>
  
</head>

<!-- <script>
  function openUrl(url, target) {
    window.open(url, target);
  }
</script> -->
<body>
<!-- Animated Text Splash Screen -->

<div class="splash-container" id="splash-container">
  <div class="splash-text">
    <img src="icons/logo.png" alt="Splash Image">
  </div>
</div>

<!-- Internet disconnected message -->
<div id="no-internet-message" class="no-internet-message">
  No Internet Connection
</div>

<script src="flutter_bootstrap.js?version=46" async></script> <!-- Versioned -->

</body>
</html>

[![flutter doctor](.png)](.png)
[![enter image description here](.png)](.png)

I want to revert to a version where this command flutter build web --web-renderer html was enable

I used the command flutter build web --wasm --release and it was not showing the images after the output.
I want to revert to a version where this command flutter build web --web-renderer html was enabled.

<!DOCTYPE html>
<html>
<head>
  <base href="/">

  <meta charset="UTF-8">

  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="shandiz">
  <link rel="apple-touch-icon" href="logo_fonttype.png?version=46"> <!-- Versioned -->

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="logo_fonttype.png?version=46"> <!-- Versioned -->

  <title>شاندیز میوه</title>
  <link rel="manifest" href="manifest.json?version=46"> <!-- Versioned -->

  <style>
    /* Splash screen container */
    .splash-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* تنظیم ارتفاع به اندازه کل صفحه */
    }

    .splash-text img {
      width: 250px; /* سایز متوسط برای تصویر */
      height: auto; /* تناسب حفظ شود */
    }

    /* General styles */
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      color: white;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    /* Splash screen container */
    .splash-container {
      text-align: center;
      animation: fadeOut 2s ease-in-out 3s forwards;
    }

    /* Text animation */
    .splash-text {
      font-size: 2rem;
      font-weight: bold;
      opacity: 0;
      animation: fadeIn 2s ease-in-out forwards, scaleUp 2s ease-in-out 0.5s forwards;
    }

    /* Keyframes for fade in animation */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* Keyframes for scaling the text */
    @keyframes scaleUp {
      0% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1.2);
      }
    }

    /* Keyframes for fade out the whole splash */
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

    .no-internet-message {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.8); /* پس‌زمینه مشکی */
      color: white; /* رنگ متن سفید */
      padding: 10px;
      text-align: center;
      font-size: 18px;
      display: none; /* به طور پیش‌فرض مخفی است */
    }
  </style>

  <script>
    const serviceWorkerVersion = ""2827488426""; // Auto-injected by Flutter build process

    // Check and handle internet connection status
    function checkInternetConnection() {
       const messageElement = document.getElementById('no-internet-message');
       if (!navigator.onLine) {
         messageElement.style.display = 'block';
       } else {
         messageElement.style.display = 'none';
       }
    }

    // Add listeners for online and offline events
    window.addEventListener('online', checkInternetConnection);
    window.addEventListener('offline', checkInternetConnection);

    // Initial check when page loads
    window.addEventListener('load', checkInternetConnection);

    function hideSplashScreen() {
      const splashContainer = document.getElementById('splash-container');
      if (splashContainer) {
        splashContainer.style.display = 'none';
      }
    }

    // Hide splash screen after Flutter's first frame is ready
    window.addEventListener('flutter-first-frame', function() {
      hideSplashScreen();
    });

    // Cache busting logic
    function clearCache() {
      if ('caches' in window) {
        caches.keys().then(function(names) {
          for (let name of names) {
            caches.delete(name);
          }
        });
      }
    }

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for (let registration of registrations) {
          registration.unregister().then(clearCache);
        }
      });
    }

    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator) {
        const seconds = new Date().getTime();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", 'version.json?version=46' + seconds, true);
        xmlhttp.onload = function() {
          if (xmlhttp.status === 200) {
            const remoteVersion = xmlhttp.responseText;
            const localVersion = window.localStorage.getItem('buildNumber');
            if (localVersion !== remoteVersion) {
              clearCache();
              window.localStorage.setItem('buildNumber', remoteVersion);
            }
          }
        };
        xmlhttp.send();
      }
    });
  </script>
  <script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>
  
</head>

<!-- <script>
  function openUrl(url, target) {
    window.open(url, target);
  }
</script> -->
<body>
<!-- Animated Text Splash Screen -->

<div class="splash-container" id="splash-container">
  <div class="splash-text">
    <img src="icons/logo.png" alt="Splash Image">
  </div>
</div>

<!-- Internet disconnected message -->
<div id="no-internet-message" class="no-internet-message">
  No Internet Connection
</div>

<script src="flutter_bootstrap.js?version=46" async></script> <!-- Versioned -->

</body>
</html>

[![flutter doctor](https://i.sstatic/XjsxP5cg.png)](https://i.sstatic/XjsxP5cg.png)
[![enter image description here](https://i.sstatic/bHrd3SUr.png)](https://i.sstatic/bHrd3SUr.png)

I want to revert to a version where this command flutter build web --web-renderer html was enable

Share Improve this question asked Mar 20 at 11:09 Amin Azizzadeh 5101 gold badge8 silver badges19 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 2

HTML renderer was removed from Flutter in version 3.29.0 in March 2025. Details here: ☂️ Intent to deprecate and remove the HTML renderer in Flutter Web.

The HTML renderer is complex, underperforming, and limited in graphical expressivity compared to WebGL-based CanvasKit and Skwasm renderers. Flutter Web’s WebGL-based renderers matured to a point where the value provided by the HTML renderer no longer outweighs the maintenance costs, the developer-facing complexity (having to choose between multiple renderers and work around their limitations), and loss of focus on the WebGL renderers.

Here is the resource with different strategies on how to display images on Web: Display images on the web - Flutter Docs

For now you can either migrate to other renderers or stay on Flutter 3.27.

Flutter web-rendrer html is not showing network images in release mode on mobile chrome and firefox [`flutter build web --web-renderer html`]

Problem-Description

My problem was that images were not loading from the server after updating Flutter. Anyway, I fixed this problem with this command: flutter build web --web-renderer html, but unfortunately, this command was not there after the update.

So I prefer to find a solution rather than changing the Flutter version.

The comments say which version we should revert to to fix the issue. But I found a way that will load images in the web version the next time Flutter is updated.

Solution

WebImageWidget.dat

/*
*  flutter developer Amin Azizzadeh
*  This class is created for convenience. To fix problem "Flutter web : Could not find an option named "--web-renderer""
* */

import 'dart:html' as html;
import 'dart:ui_web';
import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

class WebImageWidget extends StatelessWidget {
  final String imageUrl;
  final VoidCallback? onTap;

  WebImageWidget(this.imageUrl, {Key? key, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    platformViewRegistry.registerViewFactory(
      imageUrl,
      (int viewId) {
        final img = html.ImageElement();
        img.src = imageUrl;
        img.draggable = false;
        img.style.width = '100%';
        img.style.height = '100%';

        // Image loading error handling
        img.onError.listen((event) {
          print("Failed to load image: $imageUrl");
        
          img.src = 'assets/noimage.jpg'; // example: Default image if there is no link
        });

        return img;
      },
    );

    return Stack(
      children: [
        HtmlElementView(viewType: imageUrl), // Show image
        Positioned.fill(
          child: GestureDetector(
            onTap: onTap, // Click management
            child: Container(color: Colors.transparent), // Clickable layer
          ),
        ),
      ],
    );
  }
}

How to call

WebImageWidget('https://amin.app/storage/link1',onTap: () {
                                                          // click event 
                                                        },)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

dart - Flutter web : Could not find an option named "--web-renderer" - Stack Overflow

2 Answers 2

Flutter web-rendrer html is not showing network images in release mode on mobile chrome and firefox [`flutter build web --web-renderer html`]

Problem-Description

Solution

How to call

与本文相关的文章

评论列表(0)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

2 Answers 2

Flutter web-rendrer html is not showing network images in release mode on mobile chrome and firefox [flutter build web --web-renderer html]

Problem-Description

Solution

How to call

与本文相关的文章

评论列表(0)

Flutter web-rendrer html is not showing network images in release mode on mobile chrome and firefox [`flutter build web --web-renderer html`]