Reputation: 231
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!
Upvotes: 1
Views: 3283
Reputation: 673
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
.
Upvotes: 1