使用NextJS 13.3 appDir与next-intl按语言选图片的最佳实践咨询

你的现有实现是可行的，但当需要支持更多语言时，条件判断会变得繁琐，下面是几种更易维护的优化方案：

方案一：使用映射对象管理多语言图片 #

把不同语言的图片路径映射到对象中，新增语言时只需在对象里添加键值对，逻辑更清晰：

import imgPL from '/public/images/myImage_pl.png';
import imgEN from '/public/images/myImage_en.png';
import { useLocale } from 'next-intl';
import Image from 'next/image';

export default function Page() {
  const locale = useLocale();
  const imageMap = {
    pl: imgPL,
    en: imgEN
    // 新增语言时直接添加，比如 es: imgES
  };

  // 提供默认图片作为 fallback，避免找不到对应语言的图片
  const currentImage = imageMap[locale] ?? imgEN;

  return (
    <Image src={currentImage} alt="" width={200} />
  );
}

方案二：利用 public 目录结构动态拼接路径 #

如果图片命名严格遵循myImage_{locale}.png的规则，可以直接通过locale拼接路径，无需逐个导入图片（注意：此方式需要确保所有语言对应的图片文件都存在，否则会加载失败）：

import { useLocale } from 'next-intl';
import Image from 'next/image';

export default function Page() {
  const locale = useLocale();
  const imageSrc = `/images/myImage_${locale}.png`;

  return (
    <Image 
      src={imageSrc} 
      alt="" 
      width={200} 
      // 可选：添加 fallback 图片，当对应语言图片不存在时显示
      fallbackSrc="/images/myImage_en.png"
    />
  );
}

方案三：封装成可复用组件 #

如果多个页面都需要多语言图片加载逻辑，可以封装成独立组件，提升代码复用性：

// components/LocalizedImage.js
import { useLocale } from 'next-intl';
import Image from 'next/image';

export default function LocalizedImage({ baseName, alt, ...props }) {
  const locale = useLocale();
  const imageSrc = `/images/${baseName}_${locale}.png`;

  return (
    <Image 
      src={imageSrc} 
      alt={alt} 
      fallbackSrc={`/images/${baseName}_en.png`}
      {...props} 
    />
  );
}

// 使用组件
import LocalizedImage from '@/components/LocalizedImage';

export default function Page() {
  return (
    <LocalizedImage baseName="myImage" alt="" width={200} />
  );
}

这些方案都比原始的条件判断更易扩展和维护，你可以根据项目的实际需求选择合适的方式。

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