I'm currently faced with an issue wherein I need to download an image from the server and display it on the client side. Despite successfully downloading the image (confirmed in DevTools > Network > name-of-request > Preview), I'm encountering difficulties displaying the image and finding it within (DevTools > Sources > Page > Top > Localhost).
public async getMedia(id: number | undefined): Promise<Blob | undefined> {
if(!id || id === 0) { return undefined }
const response = await this.httpClient.get<any>(
`/api/advertisements/image/${id}`
);
const contentType: string = response.headers['content-type'] || 'image/pjpeg';
const data: string = response.data
console.log(data)
const blob = new Blob([data], { type: contentType })
const url = window.URL.createObjectURL(blob)
console.log(url)
return blob
}
Console Output:
"
$.' ",#(7),01444'9=82..."
"blob:http://localhost:57087/a0ae04cd-c0a0-4263-a7fb-dab400a802a4"
https://i.sstatic.net/nyDZD.png
Additional Information:
This is the code snippet located on the server.
[Route("image/{id}")]
[HttpGet]
public async Task<IHttpActionResult> ImageGet(int id) {
....insert download from storage account
var fileName = Path.GetFileName(url);
await blockBlob.DownloadToByteArrayAsync(buffer, 0);
response.Content = new ByteArrayContent(buffer, 0, (int)blockBlob.Properties.Length);
response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(System.Web.MimeMapping.GetMimeMapping(fileName));
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment") { FileName = fileName };
return ResponseMessage(response);
}
In order to verify functionality,
I tested by uploading an image from the client using the <input> tab, and then utilizing window.URL.createObjectURL(File). The ObjectURL was successfully created and displayed as expected.