usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak MkMediaImage.vue

This commit is contained in:
syuilo 2025-05-11 16:25:49 +09:00
parent c793038a8b
commit 3d60d18e80
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/MkMediaImage.vue
View File

@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
}" }"
> >
<MkImgWithBlurhash <MkImgWithBlurhash
v-if="prefer.s.enableHighQualityImagePlaceholders"
:hash="image.blurhash" :hash="image.blurhash"
:src="(prefer.s.dataSaver.media && hide) ? null : url" :src="(prefer.s.dataSaver.media && hide) ? null : url"
:forceBlurhash="hide" :forceBlurhash="hide"
@ -27,6 +28,20 @@ SPDX-License-Identifier: AGPL-3.0-only
:width="image.properties.width" :width="image.properties.width"
:height="image.properties.height" :height="image.properties.height"
:style="hide ? 'filter: brightness(0.7);' : null" :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> </component>
<template v-if="hide"> <template v-if="hide">
@ -300,4 +315,12 @@ html[data-color-scheme=light] .visible {
font-size: 0.8em; font-size: 0.8em;
padding: 2px 5px; padding: 2px 5px;
} }
.image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
</style> </style>