The problem of adding "%20" to the url when I get a build with NextJS

Question

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

Answer 1

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!