I am making a simple NextJS (v13) project using TheMoviedb. In this project, I pull the images and titles of the content with an API request. I can access the image paths with a variable called dt
. These are called backdrop_path
or poster_path
. While the images can be pulled without any problem while working on localhost, when I publish my project (in Vercel), it adds the phrase %20 to the end of my url expressions. To give an example
blabla.jpg&w=640&q=75 (localhost)
blabla.jpg%20&w=640&q=75 (in public)
I am also attaching my Image component below so that you can understand this problem better. Thanks everyone.
<Image
alt="Thumbnail Image"
width={1080}
height={1920}
src={`https://image.tmdb.org/t/p/original/${(dt.backdrop_path || dt.poster_path)}`}/>
In Next.js 13 <Image>
Component, we are supposed to use loader
prop to pass link as the src
of image
'use client'
import Image from 'next/image'
const imageLoader = (dt) => {
return `https://image.tmdb.org/t/p/original/${(dt.backdrop_path || dt.poster_path)}`
}
export default function Page() {
return (
<Image
loader={() => imageLoader(dt)}
src="thumbnail.png"
alt="Thumbnail Image"
width={1080}
height={1920}
/>
)
}
I hope it helped you!