React：如何通过包含特殊字符的路径加载图像？

Question

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?

Answer 1

You have to encode each level in your path (skip the / characters) like this:

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.

Answer 2

You cannot render them as string. If you want to use them, you must write on Numeric code or JS escape.

You can find their codes from here

As your wanted,

@ : @
# : #
$ : $