[Web] [HTML] Styles applied to an img tag url are incorrectly applied to other img tags with the same url #115405
Description
When using the NetworkImage widget with a specific url, and applying a ColorFilter on that image, any re-uses of that image with the same url are given the styles, such as the ColorFilter, applied to that image. This happens on initial render only. On subsequent frames, such as when re-sizing the page, the behavior gets corrected.
Code sample with same URL
//
import 'package:flutter/material.dart';
void main() {
runApp(const ImageFilterTest());
}
class ImageFilterTest extends StatefulWidget {
const ImageFilterTest({Key? key}) : super(key: key);
@override
_ImageFilterTestState createState() => _ImageFilterTestState();
}
class _ImageFilterTestState extends State<ImageFilterTest> {
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(minHeight: 200),
child: Container(
padding: EdgeInsets.all(10),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.blueAccent,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://source.unsplash.com/category/fashion/900x600'),
colorFilter: ColorFilter.mode(
Colors.red.withOpacity(0.8),
BlendMode.modulate,
),
),
),
child: LayoutBuilder(
// used to get the constraints of the parent widget
builder: (context, contstraints) {
return ConstrainedBox(
constraints: BoxConstraints(
minHeight: 200,
maxWidth: 400,
),
child: Image.network(
'https://source.unsplash.com/category/fashion/900x600'),
);
},
),
),
);
}
}
With colorFilter incorrectly being applied to the smaller forefront image upon initial render:
Expected behavior:
