Next.js Discord

Discord Forum

Next Image not working in production

Unanswered
Gharial posted this in #help-forum
Open in Discord
GharialOP
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;
  }

24 Replies

GharialOP
This is the image component in dev mode:
While this is what it renders in production:
Alligator mississippiensis
did the file paths change?
fuma
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
GharialOP
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}
            />
          );
        })}
fuma
Then use my first approach, change it from a relative path to a url
“/../public/image.png” isn’t a url
GharialOP
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
fuma
“/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
GharialOP
This is my folder structure:
app
      - components
              -card (where I'm importing the file path)
public
      -assets
            -thumbnails
                  -beyond-earth
                        -regular
                              -large.jpg
fuma
Put the assets in /public folder
GharialOP
That's where it is, I just updated the diagram
fuma
Then, why are you using “public/../“? As I mentioned above, use a url instead of file path
GharialOP
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
fuma
“/assets/image.png” - Valid url
“/../public/asset/image.png” - Invalid url
GharialOP
When I use this “/public/assets/image.png” the image doesn't load
fuma
You probably putted the image in a wrong place, can you show me the url, with a screenshot of file structure?
GharialOP
This is the function that corrects the path:
export default function convertPath(inputPath: string): string {
    const newPath = inputPath.replace('./assets', '/../public/assets');
    return newPath;
  }
fuma
Changing “/../public/assets” to “/assets” should work for you
(in the convert path function)
If not, check the devtools, find the actual url which your browser failed to fetch