1

I've set my own react project with typescript and react and my own webpack config. Hence I did or did not something somewhere wrong and I can't figure out what.

My problem is that I can't import my images.

I've tried the solutions from those guides but to no avail: https://medium.com/better-programming/how-to-display-images-in-react-dfe22a66d5e7

My setup is as follows:

src > assets/components/theme index.tsx custom.d.ts

assets > img > Logo.png

components > different folders for components & App.tsx

Index.tsx and custom.d.ts are next to each other.

In my webpack config I have this:

{
   test: /\.(png|svg|jpg|jpeg|gif)$/i,
   type: 'asset/resource',
}

In my custom.d.ts file I have this:

declare module '*.jpg'
declare module '*.png'
declare module '*.jpeg'
declare module '*.gif'

I am trying to import the file like this: import Logo from '../../assets/img/Logo'

I am getting this error: Cannot find module '../../assets/img/Logo' or its corresponding type declarations.ts(2307)

Please let me know if you need additional information.

Thanks!

sens_vk
  • 171
  • 2
  • 13
  • 1
    possible duplicate of [TS2307: Cannot find module './images/logo.png'](https://stackoverflow.com/questions/57127606/ts2307-cannot-find-module-images-logo-png) and [Typescript image import](https://stackoverflow.com/questions/51100401/typescript-image-import) – Mekel Ilyasa Feb 15 '21 at 14:09

1 Answers1

1

You have asset/resource in your config, but said your structure is assets/img, try changing asset to assetsin your config, or creating the path asset/resource.

Arthur Bruel
  • 678
  • 3
  • 12