net::ERR_INVALID_URL when setting <img> src from base64 string

Question

I have a react component that have img tag and loads the image as a base64 string.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEX___8AAABVwtN-AAAAy0lEQVR42uyY3Q0DIQyD2cD7b-kNrioh_PQ49bXFdqWeIr6nCGJDsSzLsv5EuKpYQHBUegDjv64yK0UA13shVrMSBlqj5IF6XJSBxDhVgkAbnYjf86Q9HFhQfrPYk4Hup3WYbvokAYDNV9FtBZoARofiw6IIXFO-KLifHRVgDRZ3QgRYxmicoj1zODCMNfZOzxpqwBS00HoFSaBH7aQ-L-ZiQNxHiY3jCAFtsyDyliIwhc4MG4pAf7jLnPX4snc0YFmWZf2yXgEAAP__jsd46gGd3UIAAAAASUVORK5CYII=" alt="base64 image" style='width: 200px; height: 200px' />

But it only work on safari. Not working on google chrome.

Am I miss anything?

Thanks

Answer 1

you can use this for adding image in component:

<img src={required("./imagefolder/image.jpg")} alt="my image" />

or you have to import your image first then use it :

import myimage from "./imagefolder/image.jpg"

then use it like this:

<img src={myimage} alt="my image" />