Nextjs 14 生产服务器中不显示图片？

Question

在我运行构建并上传托管图像的 cpanel 中的所有文件后，我看起来像是损坏了。 我在 package.json 中添加了我的服务器地址 这是我的 next.config.js 文件

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

module.exports = nextConfig;

公共文件夹中的所有图像 这是我的图像组件

"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;

这是我的图像 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" }
]

您能帮我解决图像问题吗？

Answer 1

您可能必须更改引用图像的方式，因为它们显然试图在不存在的路径中搜索，请在图像 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" }
]

或

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 是您的域名（example.com），这样您的应用程序就可以正确引用图像。

您的域环境变量可以添加到 cPanel 仪表板中的“Node.js 设置应用程序”。