How image src show the image from a blob/file
this is how we get the blob/file data

Figure — 2 This is how we show a blob/file data onto a image tag using Javascript

Note: The blob’s result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.

The below part is for server side when have to deal with a blob file and base64 image file.

Use Case: Front-end on vue js and Back-end Laravel

upload a image from vue js to back-end server side Laravel.

vue js have to format the blob file to base64 format otherwise it can be send to server side back-end framework (laravel).

Figure-2 gives the script to get blob file as base64 image file.

If normal form submit is used to send the data to server side then don’t need to convert the image to base64.

this is how we can convert the base64 image file format to a png,jpg,gif, image file

I have used back-end as laravel.

Image::make() is a use case of intervention/image package for laravel.

Resources:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
['Alam Riku']
['JavaScript', 'Src', 'Vuejs', 'Laravel', 'Imagetag']