NextJS v10 Image组件设置basePath后无法加载图片的解决方案咨询

这个问题我之前迁移项目的时候也碰到过——当设置了basePath后，Next.js的Image组件不会自动把basePath追加到你写的绝对路径src上，导致请求的图片路径不对，自然加载失败。下面给你几种实用的解决办法：

方案1：利用环境变量动态拼接路径 #

Next.js会自动将你在next.config.js中设置的basePath注入到客户端可访问的环境变量process.env.NEXT_PUBLIC_BASE_PATH中，用它来拼接图片路径既灵活又不用硬编码：

import Image from 'next/image';

export default function YourComponent() {
  return (
    <Image
      src={`${process.env.NEXT_PUBLIC_BASE_PATH}/me.jpg`}
      alt="A photo of myself."
      className="rounded-full h-48 w-48 mx-auto"
      width="192"
      height="192"
    />
  );
}

这样以后哪怕你修改basePath的值，也不用手动调整所有图片的路径，非常省心。

方案2：通过useRouter钩子获取basePath #

如果你习惯用Next.js的路由API，也可以用useRouter拿到当前的basePath再拼接：

import Image from 'next/image';
import { useRouter } from 'next/router';

export default function YourComponent() {
  const router = useRouter();

  return (
    <Image
      src={`${router.basePath}/me.jpg`}
      alt="A photo of myself."
      className="rounded-full h-48 w-48 mx-auto"
      width="192"
      height="192"
    />
  );
}

为什么直接写/me.jpg不行？ #

当你设置了basePath: "/an"，应用的所有静态资源都需要从/an路径下获取，但Next.js v10的Image组件不会自动将basePath追加到你指定的绝对路径src上。此时组件会直接请求根路径下的/me.jpg，而不是正确的/an/me.jpg，所以找不到图片资源。

额外提醒 #

• 确保你的图片文件放在项目根目录的public文件夹下（比如public/me.jpg），这是Next.js静态资源的默认存放位置；
• 如果后续需要加载外部域名的图片，记得在next.config.js的images.domains数组中添加对应的域名，不过这和你当前的问题无关，只是个小提示。

内容的提问来源于stack exchange，提问作者vidu.sh