React Images Import in Typescript

Question

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!

Answer 1

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