Steps to reproduce
- Build app for web.
- Access with a web browser.
If cacheWidth = cacheHeight = 30 (which is smaller than the 40px image size), the page will display a black square of the correct size instead of the image.
If cacheWidth = cacheHeight = 50 (which is larger or equal than the 40px image size), the page will display the image correctly. it also works if both are null.
Pitfalls avoided: Make sure the image you use for testing exists (i.e. you can open it in your browser). Ensure the image has permissive CORS headers (no CORS errors in browser console).
Expected results
The image displays properly no matter the values of cacheWidth and cacheHeight.
Actual results
If cacheWidth or cacheHeight are smaller than the image's pixel dimensions, then the image does not display, an all-black placeholder of the correct size is displayed instead.
No error messages or special logs.
Code sample
Code sample
import 'package:flutter/widgets.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Image.network(
cacheWidth: 30,
cacheHeight: 30,
'https://fastly.picsum.photos/id/505/40/40.jpg?hmac=egB4BZLkmlPCkk32_xTVvQg2I8QZH2w369evjD3Q1Pk',
);
}
}Flutter Doctor output
Doctor output
[✓] Flutter (Channel beta, 3.27.0-0.1.pre, on Ubuntu 22.04.5 LTS 6.8.0-48-generic, locale en_US.UTF-8)
• Flutter version 3.27.0-0.1.pre on channel beta at /home/michael/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2e2c358c9b (13 days ago), 2024-10-22 11:02:13 -0400
• Engine revision af0f0d559c
• Dart version 3.6.0 (build 3.6.0-334.3.beta)
• DevTools version 2.40.1
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /home/michael/Android/Sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = /home/michael/Android/Sdk
• Java binary at: /snap/android-studio/161/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✗] Linux toolchain - develop for Linux desktop
✗ clang++ is required for Linux development.
It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
✗ pkg-config is required for Linux development.
It is likely available from your distribution (e.g.: apt install pkg-config), or can be downloaded from
https://www.freedesktop.org/wiki/Software/pkg-config/
[✓] Android Studio (version 2024.1)
• Android Studio at /snap/android-studio/161
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
[✓] VS Code (version 1.95.1)
• VS Code at /snap/code/current/usr/share/code
• Flutter extension version 3.100.0
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.5 LTS 6.8.0-48-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 130.0.6723.91
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
Steps to reproduce
If
cacheWidth=cacheHeight= 30 (which is smaller than the 40px image size), the page will display a black square of the correct size instead of the image.If
cacheWidth=cacheHeight= 50 (which is larger or equal than the 40px image size), the page will display the image correctly. it also works if both arenull.Pitfalls avoided: Make sure the image you use for testing exists (i.e. you can open it in your browser). Ensure the image has permissive CORS headers (no CORS errors in browser console).
Expected results
The image displays properly no matter the values of
cacheWidthandcacheHeight.Actual results
If
cacheWidthorcacheHeightare smaller than the image's pixel dimensions, then the image does not display, an all-black placeholder of the correct size is displayed instead.No error messages or special logs.
Code sample
Code sample
Flutter Doctor output
Doctor output