After extracting an image from Microsoft graphQL, I converted it to base64 before saving it in vuex.
Buffer.from(image).toString('base64')
Now, when trying to display the image in my component using the following code:
<img class="shadow avatar border-white" :src="`data:image/jpg;base64,${this.$store.state.user.profilePhoto}`"/>
I experimented with different approaches like adding charset-utf-8 and testing various image formats such as png and jpeg.
The CSS class applied simply rounds off the edges of the image and adds a subtle shadow effect.
However, currently, all I see is a transparent circle without the image being displayed. Any suggestions on a correct way to encode the image for rendering?