<div v-for="(data, key) in imgURL" :key="key">
<img :src= "getLink(data)" />
</div>
imgURL here is an array that contains file names.
methods: {
async getLink(url){
let response = await PostsService.downloadURL({
imgURL : url
})
//return response.data
let imgdata = await axios.get(response.data)
console.log(imgdata.data)
return imgdata.data
}
}
The base64 image is printed in the console like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAwAAAAHkCAIAAAAGqd9kAAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAIABJREFUeJ.....
However, the image does not load on the page.
I have tried using a direct URL generated by the server but it doesn't work because I am only storing part of the file name and using it to generate the complete URL. The signedURL generated in the code above is "response.data".
I am uploading images using FileReader and Axios with the signedURL.
I need help identifying where the issue lies.