我正在尝试从我的服务器下载图像并在客户端上显示。我可以很好地下载图像,(DevTools > Network > name-of-request > Preview)正确显示图像。
我无法显示图像,并且它不保存图像(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
}
控制台输出:
联系我们
$.'“,#(7),01444'9 =82...”
“blob:http://localhost:57087/a0ae04cd-c0a0-4263-a7fb-dab400a802a4”
其他信息这是我在服务器上的信息。
[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);
}
- 为了测试这是否有效,* 我使用选项卡从客户端上传了一个图像,然后使用
window.URL.createObjectURL(File)
,它创建了ObjectURL并正确显示。
1条答案
按热度按时间oaxa6hgo1#
看起来响应类型在错误的位置。
/api/advertisements/image/${id}
,{},{ responseType:'blob' }