Nextjs 14 Images are not displayed in production server?

Question

After I yarn run build and upload all files in the cpanel hosting my images looks like broken. I added my server address in the package.json Here is my next.config.js file

const nextConfig = {
  output: 'export', //for deployment
};

module.exports = nextConfig;

Here is inspect img ss All images in the public folder This is my image component

"use client";
import React from "react";
import Image from "next/image";

interface ImageItemProps {
  src: string;
  alt: string;
  onClick: () => void;
}

const ImageItem: React.FC<ImageItemProps> = ({ src, alt, onClick }) => {
  return (
    <div className="relative cursor-pointer h-60" onClick={onClick}>
      <Image src={src} alt={alt} fill style={{ objectFit: "cover" }} />
      {/* Adjust width and height accordingly */}
    </div>
  );
};

export default ImageItem;

This is my image json

[
  { "src": "/imageList1.jpg", "alt": "Image 1" },
  { "src": "/imageList2.jpg", "alt": "Image 2" },
  { "src": "/imageList3.jpg", "alt": "Image 3" },
  { "src": "/imageList4.jpg", "alt": "Image 4" },
  { "src": "/imageList5.jpg", "alt": "Image 5" },
  { "src": "/imageList6.jpg", "alt": "Image 6" }
]

Could you please help me to figure out Image problem.

Answer 1

You may have to change the way you are referencing the images, since they are apparently trying to search in a path where they are not, try this in your image json:

[
  { "src": "./imageList1.jpg", "alt": "Image 1" },
  { "src": "./imageList2.jpg", "alt": "Image 2" },
  { "src": "./imageList3.jpg", "alt": "Image 3" },
  { "src": "./imageList4.jpg", "alt": "Image 4" },
  { "src": "./imageList5.jpg", "alt": "Image 5" },
  { "src": "./imageList6.jpg", "alt": "Image 6" }
]

or

import React from "react";
import Image from "next/image";

interface ImageItemProps {
  src: string;
  alt: string;
  onClick: () => void;
}

const ImageItem: React.FC<ImageItemProps> = ({ src, alt, onClick }) => {
  const imageUrl = process.env.DOMAIN + src;

  return (
    <div className="relative cursor-pointer h-60" onClick={onClick}>
      <Image src={imageUrl} alt={alt} fill style={{ objectFit: "cover" }} />
      {/* Adjust width and height accordingly */}
    </div>
  );
};

export default ImageItem;

process.env.DOMAIN is your domain name (example.com), this way your app can have the images referenced correctly.

Your domain environment variable can be added to the option called "Setup Node.js App" in your cPanel Dashboard.