导入PNG图片使用时报错JSX元素无构造/调用签名、src类型不匹配如何解决？

报错1：JSX element type 'Edit' does not have any construct or call signatures #

• 原因：你导入的Edit是静态图片资源，不是可实例化的React组件，不支持作为JSX标签调用。
• 解决方法：直接删除<Edit />这行错误代码即可，图片资源没有作为JSX组件使用的用法。

报错2：Type 'StaticImageData' is not assignable to type 'string'.ts(2322) #

• 原因：你的项目（多为Next.js、或配置了TS静态资源类型声明的打包项目）导入png资源默认返回的是StaticImageData类型对象，而非直接的图片路径字符串，该对象的src属性才是可用的路径字符串。
• 解决方法分为两种：
  1. 用原生img标签：取导入对象的src属性赋值

     import Edit from 'src/assets/setting/advertising/edit.png';
     
     function getOptions(row) {
       return (
         <div>
           <img src={Edit.src} alt="编辑" />
         </div>
       );
     }
     

  2. 用Next.js自带Image组件：可直接传入整个导入对象

     import Image from 'next/image';
     import Edit from 'src/assets/setting/advertising/edit.png';
     
     function getOptions(row) {
       return (
         <div>
           <Image src={Edit} alt="编辑" width={20} height={20} />
         </div>
       );
     }
     

可选补充配置 #

如果修改后仍有类型报错，可在项目的全局类型声明文件（如src/global.d.ts）中添加图片资源的类型声明：

// Next.js项目配置
declare module '*.png' {
  const content: import('next/image').StaticImageData;
  export default content;
}

// Vite/其他原生React项目配置
declare module '*.png' {
  const content: string;
  export default content;
}

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