我尝试在我的应用程序上显示餐厅卡片，但我不确定什么是根据餐厅有条件地渲染图像的最佳方式。这种方式可以工作，但不是最佳方式，因为如果我有10张卡片，我必须手动添加所有10张导入和案例。

import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import kegLogo from "../assets/Keg.png";
import Image from "next/image";
import pizzaLogo from "../assets/pizza-logo.png";

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

export default RestaurantCard;