NextJS v10 Image组件配置basePath后无法加载图片的问题咨询

我之前迁移项目到Next.js 10的时候也碰到过一模一样的问题，折腾了好一会儿才搞定，给你分享几个靠谱的解决方案：

方案一：配置images.path自动适配basePath #

这是最省心的方法，不用改任何组件代码，只需要在next.config.js里添加images.path配置，和你的basePath保持一致：

module.exports = {
  basePath: "/an",
  images: {
    path: "/an/_next/image",
  },
};

配置完成后，你原来的Image组件代码完全不用改，<Image src="/me.jpg" ... />就能正常加载图片了。原理是Next.js会自动把Image组件的资源请求路径带上basePath，避免从根路径请求导致404。

方案二：通过环境变量拼接src路径 #

如果不想修改next.config.js的images配置，也可以通过环境变量来手动拼接图片路径：

1. 首先在next.config.js里把basePath暴露为可访问的环境变量：

module.exports = {
  basePath: "/an",
  env: {
    NEXT_PUBLIC_BASE_PATH: "/an",
  },
};

2. 然后在组件里使用这个环境变量拼接src：

<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" 
/>

这种方法适合需要灵活控制路径的场景，但如果有很多Image组件的话，改起来会比较繁琐，所以更推荐第一种方案。

为什么会出现这个问题？ #

当你设置basePath后，Next.js会把所有静态资源（包括页面、JS文件、图片等）的访问路径都加上这个前缀，但Image组件的图片优化服务默认是从根路径/_next/image请求的，没有带上basePath，就导致图片找不到。配置images.path就是告诉Image组件，优化后的图片要从/an/_next/image这个路径请求，自然就能匹配到正确的资源了。

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