Skip to content

Image.memory() doesn't render on the web #53783

@csells

Description

@csells

Steps to Reproduce

  1. Run the following code on macOS:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final url = 'https://i.ytimg.com/vi/46a97ejExuY/hqdefault.jpg';
  Uint8List data;

  @override
  void initState() {
    http.get(url).then((res) => setState(() => data = res.bodyBytes));
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Flutter Demo Home Page')),
        body: Row(
          children: [
            Expanded(child: data == null ? Container() : Image.memory(data)),
            Expanded(child: Image.network(url)),
          ],
        ),
      );
}

It shows the Image from memory as well as from the URL:

image

  1. Run the same code on the web and the Image from memory doesn't show:

image

I expect the web version to work just like the macOS version.

Neither the web nor the macOS version have any runtime exceptions or debug logging output.

➜ flutter doctor --verbose
[✓] Flutter (Channel master, v1.16.4-pre.48, on Mac OS X 10.15.4 19E266, locale
    en-US)
    • Flutter version 1.16.4-pre.48 at /Users/csells/flutter
    • Framework revision 572680e9d2 (23 hours ago), 2020-03-31 17:36:02 -0400
    • Engine revision fc5b44c901
    • Dart version 2.8.0 (build 2.8.0-dev.18.0 e8c4aed700)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/csells/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.43.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (3 available)
    • macOS      • macOS      • darwin-x64     • Mac OS X 10.15.4 19E266
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: error messageError messages from the Flutter frameworka: imagesLoading, displaying, rendering imagesframeworkflutter/packages/flutter repository. See also f: labels.platform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions