Webpack & Typescript image import

by

Alternatively, in your custom_typings folder (if you have that), you can add a new import-png.d.ts file:

declare module "*.png" {
  const value: any;
  export default value;
}

So you can import an image using:

import myImg from 'img/myImg.png';

Alternatively, as reported by @mario-petrovic, you sometimes need to use a different export option as below (export = syntax). See here for the differences between the two approaches:

declare module "*.png" {
  const value: any;
  export = value;
}

In which case you probably need to import the image as:

import * as myImg from 'img/myImg.png';

More Related Contents:

  1. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  2. Dynamically import images from a directory using webpack
  3. PropTypes in a TypeScript React Application
  4. How to use refs in React with Typescript
  5. Dynamically Add Images React Webpack
  6. Typescript image import
  7. Set types on useState React Hook with TypeScript
  8. Remove console.logs with Webpack & Uglify
  9. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  10. IMAGE: You may need an appropriate loader to handle this file type
  11. Nextjs: Unable to load images from static folder
  12. webpack can’t find module if file named jsx
  13. How should I configure create-react-app to serve app from subdirectory?
  14. How to type a page component with props in Next.js?
  15. What does the colon mean in Javascript after function?
  16. React Hooks – Modified state not reflecting immediately
  17. React Hooks – Modified state not reflecting immediately
  18. React with Typescript — Generics while using React.forwardRef
  19. Is it possible to limit children to specific components using React with TypeScript?
  20. combine react build output into single js file
  21. How do I type this ‘as’ JSX attribute in TypeScript?
  22. Typescript React: Access component property types
  23. How to set build .env variables when running create-react-app build script?
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. Importing images breaks jest test
  26. React and TypeScript—which types for an Axios response?
  27. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  28. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  29. Unable to load images from static folder
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment