Next.js中如何在const数组内将在线图片替换为本地图片？

问题背景 #

需要将常量数组中的在线图片替换为本地图片，初始代码如下：

const features = [
  {
    name: 'Refined details',
    description:
      'We design every detail with the best materials and finishes. This laptop sleeve features durable canvas with double-stitched construction, a felt interior, and a high quality zipper that hold up to daily use.',
    imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-feature-07-detail-02.jpg',
    imageAlt: 'Detail of zipper pull with tan leather and silver rivet.',
  },
]

尝试以下两种方法后，无报错但图片无法显示：

方法一 #

import Image from "next/image";
import multimodal from '@/assets/multimodal.png';

const features = [
  {
    name: 'High-Quality Multisource & Multimodal Data',
    description:
      'Our laptop sleeve is compact and precisely fits 13" devices. The zipper allows you to access the interior with ease, and the front pouch provides a convenient place for your charger cable.',
    imageSrc: multimodal,
    imageAlt: 'White canvas laptop sleeve with gray felt interior, silver zipper, and tan leather zipper pull.',
  },
]

方法二 #

const features = [
  {
    name: 'High-Quality Multisource & Multimodal Data',
    description:
      'Our laptop sleeve is compact and precisely fits 13" devices. The zipper allows you to access the interior with ease, and the front pouch provides a convenient place for your charger cable.',
    imageSrc: '@/assets/multimodal.png',
    imageAlt: 'White canvas laptop sleeve with gray felt interior, silver zipper, and tan leather zipper pull.',
  },
]

原因分析 #

• 方法一：导入图片对象的逻辑本身没问题，但渲染时若未正确配置Next.js Image组件的必填属性（如width/height）或模式，会导致图片无法正常显示。
• 方法二：直接使用@/assets/multimodal.png作为路径，浏览器无法解析webpack配置的@别名，该别名仅在服务端编译阶段有效，客户端渲染时无法定位资源。

正确实现方式 #

方式一：使用Next.js Image组件（推荐） #

1. 先在next.config.js中配置@别名（若未配置）：

// next.config.js
const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias['@'] = path.join(__dirname, 'src');
    return config;
  },
}

module.exports = nextConfig;

2. 导入图片与Image组件，在数组中保存图片对象，渲染时传入完整属性：

import Image from "next/image";
import multimodal from '@/assets/multimodal.png';

const features = [
  {
    name: 'High-Quality Multisource & Multimodal Data',
    description: 'Our laptop sleeve is compact and precisely fits 13" devices. The zipper allows you to access the interior with ease, and the front pouch provides a convenient place for your charger cable.',
    imageSrc: multimodal,
    imageAlt: 'White canvas laptop sleeve with gray felt interior, silver zipper, and tan leather zipper pull.',
    imageWidth: 600, // 替换为图片实际宽度
    imageHeight: 400 // 替换为图片实际高度
  },
];

export default function Features() {
  return (
    <div className="space-y-8">
      {features.map((item, idx) => (
        <div key={idx} className="flex gap-4">
          <div>
            <h3 className="text-lg font-bold">{item.name}</h3>
            <p className="text-gray-600">{item.description}</p>
          </div>
          <Image
            src={item.imageSrc}
            alt={item.imageAlt}
            width={item.imageWidth}
            height={item.imageHeight}
            className="rounded-md"
          />
          {/* 若使用fill模式，需给父容器设置相对定位和宽高 */}
          {/* <div className="relative w-64 h-48">
            <Image src={item.imageSrc} alt={item.imageAlt} fill className="object-cover rounded-md" />
          </div> */}
        </div>
      ))}
    </div>
  );
}

方式二：使用原生img标签 #

将图片放入项目根目录的public文件夹（例如public/assets/multimodal.png），数组中使用根路径作为图片源：

const features = [
  {
    name: 'High-Quality Multisource & Multimodal Data',
    description: 'Our laptop sleeve is compact and precisely fits 13" devices. The zipper allows you to access the interior with ease, and the front pouch provides a convenient place for your charger cable.',
    imageSrc: '/assets/multimodal.png',
    imageAlt: 'White canvas laptop sleeve with gray felt interior, silver zipper, and tan leather zipper pull.',
  },
];

export default function Features() {
  return (
    <div className="space-y-8">
      {features.map((item, idx) => (
        <div key={idx} className="flex gap-4">
          <div>
            <h3 className="text-lg font-bold">{item.name}</h3>
            <p className="text-gray-600">{item.description}</p>
          </div>
          <img
            src={item.imageSrc}
            alt={item.imageAlt}
            className="w-64 h-48 object-cover rounded-md"
          />
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 使用Image组件时，必须提供width和height属性，或启用fill模式（需配合父容器的相对定位与宽高设置）。
• 使用原生img标签时，图片必须放在public目录下，路径以/开头，直接指向资源的相对位置。

内容的提问来源于stack exchange，提问作者Siqi Mao