I have tried to load an image by path that contains special characters like &@^.
When I loaded the image as below, it didn't work.
<img src="file:///test/@#$%/0.png"/>
So, I've tried to use encodeURI(path), encodeURIComponent(path), but it didn't work too.
How can I do this?
You have to encode each level in your path (skip the / characters):
const path = 'file:///test/@#$%/0.png'
const encodedPath = 'file://' + path.replace('file://', '').split('/').map((p) => encodeURIComponent(p)).join('/')
console.log(encodedPath)
// Output: file:///test/%40%23%24%25/0.png
Use the above output for your img tag, it will be loaded.