html img, blob, base64

problem

1. upload image via <input>
2. inject that file into <img src="">
3. src url is blob url
4. when i try to copy this src: blobUrl into another <img src=""> tag, it throws file not found error bc the image is not saved in server.

solution

1. when upload the image, use FileReader() API
2. convert the uploading-image into base64 string with readAsDataURL()
3. inject that base64string into <img src="">
4. now you can take that src to any other <img src=""> tags

https://refine.dev/blog/how-to-base64-upload/