diff --git a/lib/models/dynamics/article_content_model.dart b/lib/models/dynamics/article_content_model.dart
index 9e3445d0..84e4f0e5 100644
--- a/lib/models/dynamics/article_content_model.dart
+++ b/lib/models/dynamics/article_content_model.dart
@@ -30,16 +30,16 @@ class Pic {
   List<Pic>? pics;
   int? style;
   String? url;
-  num? width;
-  num? height;
+  double? width;
+  double? height;
   num? size;
   String? liveUrl;
   bool? isLongPic;
 
   Pic.fromJson(Map<String, dynamic> json) {
     url = json['url'];
-    width = json['width'];
-    height = json['height'];
+    width = (json['width'] as num?)?.toDouble();
+    height = (json['height'] as num?)?.toDouble();
     size = json['size'];
     pics = (json['pics'] as List?)?.map((item) => Pic.fromJson(item)).toList();
     style = json['style'];
diff --git a/lib/pages/article/widgets/html_render.dart b/lib/pages/article/widgets/html_render.dart
index 6db241e7..19eb9247 100644
--- a/lib/pages/article/widgets/html_render.dart
+++ b/lib/pages/article/widgets/html_render.dart
@@ -1,4 +1,3 @@
-import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
 import 'package:PiliPlus/models/common/image_preview_type.dart';
 import 'package:PiliPlus/utils/extension.dart';
 import 'package:PiliPlus/utils/utils.dart';
@@ -46,6 +45,7 @@ Widget htmlRender({
               fit: BoxFit.contain,
             );
           }
+          final size = isEmote ? 22.0 : null;
           return Hero(
             tag: imgUrl,
             child: GestureDetector(
@@ -58,10 +58,14 @@ Widget htmlRender({
                   );
                 }
               },
-              child: NetworkImgLayer(
-                width: isEmote ? 22 : maxWidth,
-                height: isEmote ? 22 : null,
-                src: imgUrl,
+              child: CachedNetworkImage(
+                width: size,
+                height: size,
+                imageUrl: Utils.thumbnailImgUrl(imgUrl, 60),
+                fadeInDuration: const Duration(milliseconds: 120),
+                fadeOutDuration: const Duration(milliseconds: 120),
+                placeholder: (context, url) =>
+                    Image.asset('assets/images/loading.png'),
               ),
             ),
           );
diff --git a/lib/pages/article/widgets/opus_content.dart b/lib/pages/article/widgets/opus_content.dart
index 2d1ab36e..0b5651f7 100644
--- a/lib/pages/article/widgets/opus_content.dart
+++ b/lib/pages/article/widgets/opus_content.dart
@@ -160,34 +160,35 @@ class OpusContent extends StatelessWidget {
               return widget;
             case 2 when (element.pic != null):
               if (element.pic!.pics!.length == 1) {
+                final pic = element.pic!.pics!.first;
+                final width = pic.width == null
+                    ? null
+                    : min(maxWidth.toDouble(), pic.width!);
+                final height = width == null || pic.height == null
+                    ? null
+                    : width * pic.height! / pic.width!;
                 return Hero(
-                  tag: element.pic!.pics!.first.url!,
+                  tag: pic.url!,
                   child: GestureDetector(
                     onTap: () {
                       if (callback != null) {
-                        callback!([element.pic!.pics!.first.url!], 0);
+                        callback!([pic.url!], 0);
                       } else {
                         context.imageView(
                           initialPage: 0,
-                          imgList: [
-                            SourceModel(url: element.pic!.pics!.first.url!)
-                          ],
+                          imgList: [SourceModel(url: pic.url!)],
                         );
                       }
                     },
                     child: Center(
-                      child: ClipRRect(
-                        borderRadius: StyleString.mdRadius,
-                        child: CachedNetworkImage(
-                          imageUrl: Utils.thumbnailImgUrl(
-                            element.pic!.pics!.first.url!,
-                            60,
-                          ),
-                          fadeInDuration: const Duration(milliseconds: 120),
-                          fadeOutDuration: const Duration(milliseconds: 120),
-                          placeholder: (context, url) =>
-                              Image.asset('assets/images/loading.png'),
-                        ),
+                      child: CachedNetworkImage(
+                        width: width,
+                        height: height,
+                        imageUrl: Utils.thumbnailImgUrl(pic.url!, 60),
+                        fadeInDuration: const Duration(milliseconds: 120),
+                        fadeOutDuration: const Duration(milliseconds: 120),
+                        placeholder: (context, url) =>
+                            Image.asset('assets/images/loading.png'),
                       ),
                     ),
                   ),