Console warning on Flutter__ImgElementImage__ during CORS web element fallback #170567
Description
Steps to reproduce
- Render an Image.network widget with a URL that does not set CORS headers, using web element fallback
- Observe errors in the console
Expected results
Expecting the image CORS web element fallback to render with no console output
Actual results
Console warning for every fallback network image render (see below)
Code sample
Code sample
Image.network( 'https://substackcdn.com/image/fetch/w_1200,h_600,c_fill,f_jpg,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd267a689-45e5-4d9c-a8af-6979bb439d7e.heic',
width: 150,
height: 150,
cacheWidth: 150,
cacheHeight: 150,
webHtmlElementStrategy: WebHtmlElementStrategy.fallback,
)Calling the following function from main seems to fix the issue, although I haven't tested it with many image configurations. Note that it just adds a few lines to the default ImgElementPlatformView._register method.
void registerWebViewFactory() {
ui_web.platformViewRegistry.registerViewFactory('Flutter__ImgElementImage__', (
int viewId, {
Object? params,
}) {
final paramsMap = params! as Map<Object?, Object?>;
// Create a new <img> element. The browser is able to display the image
// without fetching it over the network again.
final img = web.document.createElement('img') as web.HTMLImageElement;
img.src = paramsMap['src']! as String;
// Eliminate console warnings
img.style.width = paramsMap['width'] as String? ?? '100%';
img.style.height = paramsMap['height'] as String? ?? '100%';
return img;
});
}Screenshots or Video
No response
Logs
Logs
Height of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
Height of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
Height of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
Height of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [Flutter__ImgElementImage__] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.32.3, on macOS 15.5 24F74 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2025.1.2)
[✓] VS Code (version 1.93.1)
[✓] VS Code (version 1.100.0)
[✓] Connected device (2 available)
[✓] Network resourcesMetadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listLoading, displaying, rendering imagesFound to occur in 3.32Found to occur in 3.33The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team