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

View File

@@ -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)}`

View File

@@ -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">

View File

@@ -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"

View File

@@ -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>