Next.js TypeScript项目使用Image组件placeholder属性报错如何解决？

出现该报错的核心原因是TypeScript无法识别本地导入图片自带的blurDataURL属性，或是你使用的Image组件版本与传入的属性不兼容，不需要额外配置webpack，可按以下方案解决：

解决方案 #

• 方案1：适配Image组件版本的属性写法
  Next.js 13+默认的next/image组件已废弃layout属性，你代码中的layout="fill"需替换为布尔属性fill；如果要沿用旧版layout属性的API，请导入旧版Image：

  import Image from 'next/legacy/image'
  

• 方案2：添加静态图片资源的TypeScript类型声明
  在项目根目录新建types/images.d.ts文件，添加如下声明，让TS识别本地导入图片自带的blurDataURL属性：

  declare module '*.jpg' {
    const src: string
    const width: number
    const height: number
    const blurDataURL: string
    export default src
    export { width, height, blurDataURL }
  }
  
  declare module '*.png' {
    const src: string
    const width: number
    const height: number
    const blurDataURL: string
    export default src
    export { width, height, blurDataURL }
  }
  // 其他用到的图片格式如webp、avif等可按上述格式同理添加声明
  

  之后在tsconfig.json的include数组中添加该类型文件路径：

  {
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/images.d.ts"]
  }
  

• 方案3：手动传入blurDataURL兜底
  如果配置后仍报错，可手动给Image组件传入blurDataURL属性，值为低质量占位图的base64地址即可：

  import bgSell from '../../public/assets/bgSell.jpg';
  
  <Image
      fill
      src={bgSell}
      className="z-0 absolute top-0 left-0 min-h-full min-w-full object-cover"
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACf/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDk0AQAAAAAAAAAAAAAAAAAAAADIE3H/2Q=="
  />
  

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