fix image

This commit is contained in:
jxxghp
2023-08-04 07:21:26 +08:00
parent 89d982513d
commit 7d6778eaa3
2 changed files with 25 additions and 3 deletions

View File

@@ -393,7 +393,13 @@ onBeforeMount(() => {
<div class="media-page">
<div class="media-header">
<div class="media-poster">
<VImg :src="getW500Image(mediaDetail.poster_path)" cover />
<VImg :src="getW500Image(mediaDetail.poster_path)" cover class="object-cover aspect-w-2 aspect-h-3 ring-1 ring-gray-500">
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
</div>
</template>
</VImg>
</div>
<div class="media-title">
<div v-if="isExists" class="media-status">

View File

@@ -46,6 +46,15 @@ async function nameTest() {
}
}
// 打开TMDB详情页面
function openTmdbPage(type: string, tmdbId: number) {
if (!type || !tmdbId)
return
const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
window.open(url, '_blank')
}
// TMDB图片转换为w500大小
function getW500Image(url = '') {
if (!url)
@@ -104,10 +113,16 @@ function getW500Image(url = '') {
<VImg
width="10rem"
aspect-ratio="2/3"
class="object-cover aspect-w-2 aspect-h-3 rounded ring-1 ring-gray-500 shadow"
class="object-cover aspect-w-2 aspect-h-3 rounded-lg ring-1 ring-gray-500"
:src="getW500Image(nameTestResult?.media_info?.poster_path)"
cover
/>
>
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
</div>
</template>
</VImg>
</div>
<div>
@@ -153,6 +168,7 @@ function getW500Image(url = '') {
variant="elevated"
color="success"
class="me-1 mb-1"
@click="openTmdbPage(nameTestResult?.media_info?.type, nameTestResult?.media_info?.tmdb_id)"
>
{{ nameTestResult?.media_info?.tmdb_id }}
</VChip>