Make common widget for when an image format is not supported

lib/widgets/core/image.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class ImageFormatNotSupported extends StatelessWidget {
+  final String title;
+
+  const ImageFormatNotSupported(this.title, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Container(
+      color: theme.colorScheme.errorContainer,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        spacing: 8,
+        children: [const Icon(Icons.broken_image), Text(title)],
+      ),
+    );
+  }
+}

lib/widgets/exercises/images.dart

@@ -16,24 +16,35 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
+import 'package:wger/l10n/generated/app_localizations.dart';
 import 'package:wger/models/exercises/image.dart';
+import 'package:wger/widgets/core/image.dart';
 
 class ExerciseImageWidget extends StatelessWidget {
-  const ExerciseImageWidget({this.image, this.height});
+  ExerciseImageWidget({this.image, this.height});
 
+  final _logger = Logger('ExerciseImageWidget');
   final ExerciseImage? image;
   final double? height;
 
   @override
   Widget build(BuildContext context) {
+    final i18n = AppLocalizations.of(context);
+
     return image != null
-        ? FadeInImage(
-            placeholder: const AssetImage('assets/images/placeholder.png'),
-            image: NetworkImage(image!.url),
-            fit: BoxFit.cover,
-            imageSemanticLabel: 'Exercise image',
-            height: height,
+        ? Image.network(
+            image!.url,
+            semanticLabel: 'Exercise image',
+            errorBuilder: (context, error, stackTrace) {
+              _logger.warning('Failed to load image ${image!.url}: $error, $stackTrace');
+              final imageFormat = image!.url.split('.').last.toUpperCase();
+
+              return ImageFormatNotSupported(
+                i18n.imageFormatNotSupported(imageFormat),
+              );
+            },
           )
         : const Image(
             image: AssetImage('assets/images/placeholder.png'),

lib/widgets/gallery/overview.dart

@@ -25,6 +25,7 @@ import 'package:wger/l10n/generated/app_localizations.dart';
 import 'package:wger/models/gallery/image.dart' as gallery;
 import 'package:wger/providers/gallery.dart';
 import 'package:wger/screens/form_screen.dart';
+import 'package:wger/widgets/core/image.dart';
 import 'package:wger/widgets/core/text_prompt.dart';
 
 import 'forms.dart';
@@ -75,9 +76,9 @@ class Gallery extends StatelessWidget {
                               mainAxisAlignment: MainAxisAlignment.center,
                               spacing: 8,
                               children: [
-                                Icon(Icons.broken_image),
-                                Text(i18n.imageFormatNotSupported(imageFormat)), 
-                              ]
+                                const Icon(Icons.broken_image),
+                                Text(i18n.imageFormatNotSupported(imageFormat)),
+                              ],
                             ),
                           ),
                         );
@@ -102,7 +103,6 @@ class ImageDetail extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final i18n = AppLocalizations.of(context);
-    final theme = Theme.of(context);
     return Container(
       key: Key('image-${image.id!}-detail'),
       padding: const EdgeInsets.all(10),
@@ -119,16 +119,8 @@ class ImageDetail extends StatelessWidget {
               errorBuilder: (context, error, stackTrace) {
                 final imageFormat = image.url!.split('.').last.toUpperCase();
 
-                return Container(
-                  color: theme.colorScheme.errorContainer,
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    spacing: 8,
-                    children: [
-                      Icon(Icons.broken_image),
-                      Text(i18n.imageFormatNotSupportedDetail(imageFormat))
-                    ]
-                  ),
+                return ImageFormatNotSupported(
+                  i18n.imageFormatNotSupported(imageFormat),
                 );
               },
             ),