Repository navigation
Image.memory() doesn't render on the web #53783
Description
Steps to Reproduce
- 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:
- Run the same code on the web and the Image from memory doesn't show:
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!
Activity
dnfield commentedon Apr 1, 2020
This is a CORS issue. If you provide the bytes directly,
Image.memoryworks on web. However, the image you're fetching from the network doesn't have the right CORS headers on it to be fetch-able in the browser. If you fetched it from localhost or some origin that provided the right headers it would work.It's kind of unfortunate that the Flutter CLI doesn't report this - you can see it in the browser console though:
csells commentedon Apr 1, 2020
Why would it work via Image.network and not work via Image.memory? They're the same bytes in both cases. Are the bytes "marked" as not CORS compliant in some way? Doesn't Image.network have to pull down the bytes before they can be displayed?
dnfield commentedon Apr 1, 2020
Image.networkactually produces animgHTML tag, which has different rules for fetching bytes over the network.http.getboils down to anXMLHttpRequestfor the bytes, which fails.dnfield commentedon Apr 1, 2020
It's basically this:
csells commentedon Apr 1, 2020
ugh
lock commentedon Apr 19, 2020
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.