How to import image from Public folder as a Typescript module?

I have a default create-react-app setup with Typescript.

My assets located in the public folder.

I want to load image into canvas through another library (Phaser).

And that works:

let img = './assets/sprites/mushroom.png';
Phaser.game.scene.load.image('monster', img);

I can’t find the mushroom.png in the output folder assets, but it loads somehow (actually it is here):

What I want now is to check whether all my assets present while compiling time and make an aliases for them.

So I want to do import * as img from './assets/sprites/mushroom.png'

And it says: Module not found: Can’t resolve ‘./assets/sprites/mushroom.png’

I also have a file src/images.d.ts with declare module '*.png'

I have seen a multiple questions about that on SO, but can’t find an appropriate solution. Can you help me with this?

[glebkudr]

Thx, it is working, partially…

1. I do need to declare module '*.png';. WIthout it typescript says it can’t find a module mushroom.png on its exact location. I double-checked it.

2. If I do (1) it works. But only when I use img in react tag <img src={img}/>. It contents BASE64 encoded string so I can’t use that string as a source for my library, it needs path. I’ve seen a documentation about 10kb treshhold in webpack config but I don’t want to eject it. Is there a way to overcome it?

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.