From 3d60d18e80c51f7715646e51cdfbe3db3fc43d80 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 11 May 2025 16:25:49 +0900
Subject: [PATCH] tweak MkMediaImage.vue

---
 .../frontend/src/components/MkMediaImage.vue  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 68ba7dfbe9..1e5eb06a31 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		}"
 	>
 		<MkImgWithBlurhash
+			v-if="prefer.s.enableHighQualityImagePlaceholders"
 			:hash="image.blurhash"
 			:src="(prefer.s.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
@@ -27,6 +28,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:width="image.properties.width"
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.7);' : null"
+			:class="$style.image"
+		/>
+		<div
+			v-else-if="prefer.s.dataSaver.media || hide"
+			:title="image.comment || image.name"
+			:style="hide ? 'background: #888;' : null"
+			:class="$style.image"
+		></div>
+		<img
+			v-else
+			:src="url"
+			:alt="image.comment || image.name"
+			:title="image.comment || image.name"
+			:class="$style.image"
 		/>
 	</component>
 	<template v-if="hide">
@@ -300,4 +315,12 @@ html[data-color-scheme=light] .visible {
 	font-size: 0.8em;
 	padding: 2px 5px;
 }
+
+.image {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	object-position: center;
+}
 </style>