为什么next/image的src不能传入字符串？本地路径如何动态导入使用？

该类型报错是Next.js高版本Image组件的默认限制：本地静态资源默认仅支持提前import的StaticImport类型，不直接接收字符串类型的本地路径，对应场景可按以下方法解决：

• 方法1：动态require导入（适合路径有固定前缀的动态场景）
  如果你的图片路径有固定的目录前缀，仅文件名是动态的，可以用require动态引入资源，返回的格式天然符合StaticImport类型要求，示例代码：

// 假设本地图片统一存放在 src/assets/images 目录下
const getDynamicImage = (filename: string) => {
  // 路径必须包含固定前缀，不能是纯变量，否则webpack无法识别打包资源
  return require(`@/assets/images/${filename}.png`)
}

// 组件内使用
<Image 
  src={getDynamicImage('user_avatar')} 
  alt="用户头像" 
  width={100} 
  height={100} 
/>

• 方法2：使用public目录+关闭单图优化（适合路径完全动态的场景）
  把所有需要动态调用的本地图片放到项目根目录的public文件夹下，比如public/dynamic_imgs/demo.jpg，使用时直接传对应相对根路径的字符串，同时给Image组件加上unoptimized属性即可：

<Image 
  src="/dynamic_imgs/demo.jpg" 
  alt="示例图" 
  width={200} 
  height={200} 
  unoptimized 
/>

如果需要全局生效，也可以在next.config.js中添加配置：

// next.config.js
const nextConfig = {
  images: {
    unoptimized: true
  }
}
module.exports = nextConfig

配置后所有Image组件都不需要单独加unoptimized属性，可直接传入public下的字符串路径。

• 方法3：类型断言（仅临时调试用，不推荐生产环境使用）
  如果只是临时绕开TypeScript类型校验，可以对src做类型断言：

import type { StaticImport } from 'next/dist/shared/lib/get-img-props'

<Image 
  src={'/demo.jpg' as unknown as StaticImport} 
  alt="示例" 
  width={100} 
  height={100} 
/>

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