Search code examples
reactjsnext.jsvercel

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


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


Solution

  • 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!