[Typescript] import issue for images

When you try to import image in typescript project, it will report issue

import logo from "./assets/react.svg"

 

What you can do is, create a types.d.tsfile includes following cotent:

declare module '*.svg' {
  const src: string
  export default src
}
declare module '*.png' {
  const src: string
  export default src
}
declare module '*.jpg' {
  const src: string
  export default src
}
declare module '*.jpeg' {
  const src: string
  export default src
}
declare module '*.gif' {
  const src: string
  export default src
}
declare module '*.ico' {
  const src: string
  export default src
}
declare module '*.webp' {
  const src: string
  export default src
}
declare module '*.avif' {
  const src: string
  export default src
}

When creating application by using Vite or create-react-app, you also got react-app-env.d.tsor vite-env.d.ts

/// <reference types="react-scripts" />
or
/// <reference types="vite/client" />