Next Image not working in production

[autumn thorn]

My next image component renders my image path correctly while coding locally, but when I deploy to vercel the image paths are broken.

This is my image component:

 <Image
        src={convertPath(thumbnail.regular?.large)}
        width={1400}
        height={1400}
        alt="logo"
        className="rounded-lg w-full h-[110px] sm:h-[140px] lg:h-[174px] bg-cover bg-center"
      />

This is the file path from the object array:

{
    title: "Beyond Earth",
    thumbnail: {
      trending: {
        small: "./assets/thumbnails/beyond-earth/trending/small.jpg",
        large: "./assets/thumbnails/beyond-earth/trending/large.jpg",
      },
      regular: {
        small: "./assets/thumbnails/beyond-earth/regular/small.jpg",
        medium: "./assets/thumbnails/beyond-earth/regular/medium.jpg",
        large: "./assets/thumbnails/beyond-earth/regular/large.jpg",
      },
    },
    year: 2019,
    category: "Movie",
    rating: "PG",
    isBookmarked: false,
    isTrending: true,
  },

This is the convertpath function (for context):

export default function convertPath(inputPath: string): string {
    const newPath = inputPath.replace('./assets', '/../public/assets');
    return newPath;
  }

[silk edge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[autumn thorn]

This is the image component in dev mode:

While this is what it renders in production:

[ripe sky]

did the file paths change?

[blissful pier]

Be careful, you shouldn’t use a relative path like “../public/image.png”. Use “/image.png” directly, or import the image in the file:

import MyImage from “../public/image.png”

Because the path of images will be changed after building the app

[autumn thorn]

I can't import the images because the url is being passed through props from an array of objects:

{filteredVideos.map((video, index) => {
          return (
            <RegularCard
              key={index}
              title={video.title}
              thumbnail={video.thumbnail}
              year={video.year}
              category={video.category}
              rating={video.rating}
              isBookmarked={video.isBookmarked}
              isTrending={video.isTrending}
            />
          );
        })}

[blissful pier]

Then use my first approach, change it from a relative path to a url

“/../public/image.png” isn’t a url

[autumn thorn]

If I changed "/../public/assets/thumbnails/beyond-earth/regular/large.jpg" to "/../public/assets/thumbnails/beyond-earth/regular/large.jpg" then it wouldn't work locally

[blissful pier]

“/image.png”, you shouldn’t have “/../“ as a part of your url

And I don’t sure where your images are located, please put the images in the public folder if you can’t import it in files. The bundler can’t handle these assets correctly

[autumn thorn]

This is my folder structure:

app
      - components
              -card (where I'm importing the file path)
public
      -assets
            -thumbnails
                  -beyond-earth
                        -regular
                              -large.jpg

[blissful pier]

Put the assets in /public folder

[autumn thorn]

That's where it is, I just updated the diagram

The reason I added this /../ was because I neede to go backwards to the level of the app dir so I can be able to reach the public folder

[blissful pier]

Then, why are you using “public/../“? As I mentioned above, use a url instead of file path

“/assets/image.png” - Valid url
“/../public/asset/image.png” - Invalid url

[autumn thorn]

When I use this “/public/assets/image.png” the image doesn't load

[blissful pier]

You probably putted the image in a wrong place, can you show me the url, with a screenshot of file structure?

[autumn thorn]

This is the function that corrects the path:

export default function convertPath(inputPath: string): string {
    const newPath = inputPath.replace('./assets', '/../public/assets');
    return newPath;
  }

[blissful pier]

Changing “/../public/assets” to “/assets” should work for you

(in the convert path function)