fix: remove protocol-relative URLs from next/image (#889)

Next.js image component doesn't support protocol-relative URLs, so this PR replaces them to https
URLs
This commit is contained in:
Gauthier
2024-07-24 20:10:31 +02:00
committed by GitHub
parent 6cea8bba59
commit c80d9a853a
3 changed files with 23 additions and 19 deletions

View File

@@ -50,7 +50,7 @@ const DiscoverTvNetwork = () => {
{firstResultData?.network.logoPath ? (
<div className="mb-6 flex justify-center">
<Image
src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
alt={firstResultData.network.name}
className="max-h-24 sm:max-h-32"
fill

View File

@@ -50,7 +50,7 @@ const DiscoverMovieStudio = () => {
{firstResultData?.studio.logoPath ? (
<div className="mb-6 flex justify-center">
<Image
src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
alt={firstResultData.studio.name}
className="max-h-24 sm:max-h-32"
fill

View File

@@ -57,44 +57,48 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
>
<div style={{ paddingBottom: '150%' }}>
<div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
<div className="relative z-10 flex h-full flex-wrap items-center justify-center opacity-30">
<div className="relative z-10 grid h-full w-full grid-cols-2 items-center justify-center gap-2 opacity-30">
{posters[0] && (
<div className="w-1/2 p-1">
<div className="">
<Image
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
alt=""
className="w-full rounded-md"
fill
className="rounded-md"
width={300}
height={450}
/>
</div>
)}
{posters[1] && (
<div className="w-1/2 p-1">
<div className="">
<Image
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
alt=""
className="w-full rounded-md"
fill
className="rounded-md"
width={300}
height={450}
/>
</div>
)}
{posters[2] && (
<div className="w-1/2 p-1">
<div className="">
<Image
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
alt=""
className="w-full rounded-md"
fill
className="rounded-md"
width={300}
height={450}
/>
</div>
)}
{posters[3] && (
<div className="w-1/2 p-1">
<div className="">
<Image
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
alt=""
className="w-full rounded-md"
fill
className="rounded-md"
width={300}
height={450}
/>
</div>
)}