fix image size

This commit is contained in:
jxxghp
2023-08-04 07:13:26 +08:00
parent 31e47f7a8f
commit 89d982513d
4 changed files with 19 additions and 5 deletions
+1 -1
View File
@@ -371,7 +371,7 @@ const seasonsHeaders = [
const getImgUrl: Ref<string> = computed(() => { const getImgUrl: Ref<string> = computed(() => {
if (imageLoadError.value) if (imageLoadError.value)
return noImage return noImage
const url = props.media?.poster_path ?? noImage const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
// 如果地址中包含douban则使用中转代理 // 如果地址中包含douban则使用中转代理
if (url.includes('doubanio.com')) if (url.includes('doubanio.com'))
return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}` return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`
+8 -1
View File
@@ -306,6 +306,13 @@ function getEpisodeImage(stillPath: string) {
return `https://image.tmdb.org/t/p/w500${stillPath}` 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(() => { const getProductionCountries = computed(() => {
return mediaDetail.value.production_countries?.map(country => country.name) return mediaDetail.value.production_countries?.map(country => country.name)
@@ -386,7 +393,7 @@ onBeforeMount(() => {
<div class="media-page"> <div class="media-page">
<div class="media-header"> <div class="media-header">
<div class="media-poster"> <div class="media-poster">
<VImg :src="mediaDetail.poster_path" cover /> <VImg :src="getW500Image(mediaDetail.poster_path)" cover />
</div> </div>
<div class="media-title"> <div class="media-title">
<div v-if="isExists" class="media-status"> <div v-if="isExists" class="media-status">
+2 -2
View File
@@ -96,8 +96,8 @@ onMounted(() => {
<div class="d-flex justify-space-between flex-nowrap flex-row"> <div class="d-flex justify-space-between flex-nowrap flex-row">
<div class="ma-auto"> <div class="ma-auto">
<VImg <VImg
height="80" height="75"
width="54" width="50"
:src="arg.event.extendedProps.posterPath" :src="arg.event.extendedProps.posterPath"
aspect-ratio="2/3" aspect-ratio="2/3"
class="object-cover rounded shadow ring-gray-500" class="object-cover rounded shadow ring-gray-500"
+8 -1
View File
@@ -45,6 +45,13 @@ async function nameTest() {
console.error(error) console.error(error)
} }
} }
// TMDB图片转换为w500大小
function getW500Image(url = '') {
if (!url)
return ''
return url.replace('original', 'w500')
}
</script> </script>
<template> <template>
@@ -98,7 +105,7 @@ async function nameTest() {
width="10rem" width="10rem"
aspect-ratio="2/3" 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 ring-1 ring-gray-500 shadow"
:src="nameTestResult?.media_info?.poster_path" :src="getW500Image(nameTestResult?.media_info?.poster_path)"
cover cover
/> />
</div> </div>