From 89d982513d19e0a6bd6b30e245de1cbded3ad17d Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 4 Aug 2023 07:13:26 +0800
Subject: [PATCH] fix image size

---
 src/components/cards/MediaCard.vue       | 2 +-
 src/views/discover/MediaDetailView.vue   | 9 ++++++++-
 src/views/subscribe/FullCalendarView.vue | 4 ++--
 src/views/system/NameTestView.vue        | 9 ++++++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 75d8725e..44ee5962 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -371,7 +371,7 @@ const seasonsHeaders = [
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value)
     return noImage
-  const url = props.media?.poster_path ?? noImage
+  const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
     return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`
diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index ac674652..50022582 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -306,6 +306,13 @@ function getEpisodeImage(stillPath: string) {
   return `https://image.tmdb.org/t/p/w500${stillPath}`
 }
 
+// TMDB图片转换为w500大小
+function getW500Image(url = '') {
+  if (!url)
+    return ''
+  return url.replace('original', 'w500')
+}
+
 // 获取发行国家名称
 const getProductionCountries = computed(() => {
   return mediaDetail.value.production_countries?.map(country => country.name)
@@ -386,7 +393,7 @@ onBeforeMount(() => {
     <div class="media-page">
       <div class="media-header">
         <div class="media-poster">
-          <VImg :src="mediaDetail.poster_path" cover />
+          <VImg :src="getW500Image(mediaDetail.poster_path)" cover />
         </div>
         <div class="media-title">
           <div v-if="isExists" class="media-status">
diff --git a/src/views/subscribe/FullCalendarView.vue b/src/views/subscribe/FullCalendarView.vue
index 8720db62..0042d463 100644
--- a/src/views/subscribe/FullCalendarView.vue
+++ b/src/views/subscribe/FullCalendarView.vue
@@ -96,8 +96,8 @@ onMounted(() => {
           <div class="d-flex justify-space-between flex-nowrap flex-row">
             <div class="ma-auto">
               <VImg
-                height="80"
-                width="54"
+                height="75"
+                width="50"
                 :src="arg.event.extendedProps.posterPath"
                 aspect-ratio="2/3"
                 class="object-cover rounded shadow ring-gray-500"
diff --git a/src/views/system/NameTestView.vue b/src/views/system/NameTestView.vue
index da031ad2..6db5c464 100644
--- a/src/views/system/NameTestView.vue
+++ b/src/views/system/NameTestView.vue
@@ -45,6 +45,13 @@ async function nameTest() {
     console.error(error)
   }
 }
+
+// TMDB图片转换为w500大小
+function getW500Image(url = '') {
+  if (!url)
+    return ''
+  return url.replace('original', 'w500')
+}
 </script>
 
 <template>
@@ -98,7 +105,7 @@ async function nameTest() {
               width="10rem"
               aspect-ratio="2/3"
               class="object-cover aspect-w-2 aspect-h-3 rounded ring-1 ring-gray-500 shadow"
-              :src="nameTestResult?.media_info?.poster_path"
+              :src="getW500Image(nameTestResult?.media_info?.poster_path)"
               cover
             />
           </div>