Next JS餐厅卡片图片条件渲染优化方案咨询

当前实现需要手动导入每张餐厅图片，还要为每个餐厅ID编写单独的条件分支，餐厅数量增加时会导致代码冗余、维护成本飙升。下面提供几种更优的实现方式：

方案1：使用图片映射表 #

将餐厅ID与对应图片资源统一维护在一个映射对象中，渲染时直接通过ID取值，避免多分支判断：

import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import Image from "next/image";

// 导入所有餐厅图片
import kegLogo from "../assets/Keg.png";
import pizzaLogo from "../assets/pizza-logo.png";
// 新增餐厅时直接在这里添加新的图片导入

// 建立ID与图片的映射关系
const restaurantImages = {
  1: kegLogo,
  2: pizzaLogo,
  // 新增餐厅只需追加ID和对应图片的键值对
};

function RestaurantCard({ id, title, description }) {
  const imageSrc = restaurantImages[id];

  return (
    <Link className={styles.link} href={`/restaurants/${title}`}>
      <div className={styles.card}>
        {imageSrc && (
          <Image className={styles.image} src={imageSrc} alt={title} />
        )}
        <div className={styles.content}>
          <h3 className={styles.title}>{title}</h3>
          <p className={styles.description}>{description}</p>
        </div>
      </div>
    </Link>
  );
}

export default RestaurantCard;

方案2：利用命名规范动态引用图片 #

如果餐厅图片的命名与标题/ID有统一规则（比如标题.png），可以将图片放在public目录下，直接通过路径动态引用，无需手动导入：

import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import Image from "next/image";

function RestaurantCard({ id, title, description }) {
  // 根据标题生成图片路径（需确保图片命名与标题匹配，可根据实际情况调整格式）
  const formattedTitle = title.replace(/\s+/g, ''); // 移除空格适配文件名
  const imagePath = `/restaurants/${formattedTitle}.png`;

  return (
    <Link className={styles.link} href={`/restaurants/${title}`}>
      <div className={styles.card}>
        <Image 
          className={styles.image} 
          src={imagePath} 
          alt={title} 
          width={100} // 需指定图片尺寸，或使用fill模式配合容器样式
          height={100}
        />
        <div className={styles.content}>
          <h3 className={styles.title}>{title}</h3>
          <p className={styles.description}>{description}</p>
        </div>
      </div>
    </Link>
  );
}

export default RestaurantCard;

方案3：将图片路径作为组件props传入 #

如果餐厅数据来自后端接口或数据库，直接把图片路径作为props传递给组件，彻底解耦图片管理与组件逻辑：

import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import Image from "next/image";

function RestaurantCard({ id, title, description, imageSrc }) {
  return (
    <Link className={styles.link} href={`/restaurants/${title}`}>
      <div className={styles.card}>
        {imageSrc && (
          <Image className={styles.image} src={imageSrc} alt={title} />
        )}
        <div className={styles.content}>
          <h3 className={styles.title}>{title}</h3>
          <p className={styles.description}>{description}</p>
        </div>
      </div>
    </Link>
  );
}

export default RestaurantCard;

方案选择建议 #

• 方案1适合餐厅数量较少、需要Next.js静态图片优化的场景，维护简单；
• 方案2适合餐厅数量多且图片命名规范的场景，减少重复导入代码；
• 方案3最灵活，适合餐厅数据动态获取的场景，组件无需关心图片来源。

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