I have managed to successfully upload an image using axios and can preview it in Postman. However, I am unsure of how to proceed with rendering the image in vuejs.
Implementing the Get Method:
public HttpResponseMessage FetchImage(int id)
{
ImageService _imageService = new ImageService(id);
var result = new HttpResponseMessage(HttpStatusCode.OK);
string filepath = HostingEnvironment.MapPath("~/App_Data/Images/" + _imageService.GetImageData.image.filename);
FileStream fileStream = new FileStream(filepath, FileMode.Open);
Image image = Image.FromStream(fileStream);
MemoryStream memoryStream = new MemoryStream();
image.Save(memoryStream, ImageFormat.Jpeg);
result.Content = new ByteArrayContent(memoryStream.ToArray());
result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
return result;
}
Vuejs Integration:
fetchImage (image) {
axios({
method: 'get',
url: 'http://localhost:20449/api/images',
headers: {
'Content-type': 'image/jpeg'
},
params: {
id: image.id
}
}).then(response => {
this.displayedImage = response.data // Unsure if this is correct way
})
},
What approach should I take to render the fetched image in an HTML tag?