WEBAPI返回图片显示在VUE前端

WEBAPI部分

通过nuget安装Opencvsharp ，这部分用来做图像处理

在controller中写如下方法，我要对原图进行旋转使用了Opencv，如果不需要旋转可以用注释的代码

        [HttpGet(Name = "ShowImage")]
        public async Task ShowImage(string FileName)
        {
            // return PhysicalFile(FileName, "image/jpeg");
            Mat mat = new Mat();
            mat = Cv2.ImRead(FileName);
            Cv2.Rotate(mat, mat, RotateFlags.Rotate90Counterclockwise);

          
            MemoryStream stream = mat.Clone().ToMemoryStream(Path.GetExtension(FileName));
            // using (FileStream fileStream = new FileStream(FileName, FileMode.Open)) 
            //{
            //    int len = (int)fileStream.Length;
            //    byte[] buf = new byte[len];
            //    fileStream.Read(buf, 0, len);
            //    stream = new MemoryStream();
            //    stream.Write(buf, 0, len);
            //}
            return await Task.FromResult(File(stream.ToArray(), "image/jpeg"));

        }

Vue前端部分

通过axios调用controller中的ShowImage

Html部分
		
					图片
				

			
				
				
			


script部分

let FoamImageFile = ref('/assets/img/abc.bmp')  // 图片所所在目录地址
let FoamImageFileURL = ref('http://localhost:8100/assets/img/abc.bmp') //url地址

const DrawImage = async () => {
	console.log('FoamImageFile ', FoamImageFile)
	await axios.get(global_const.WEBAPI + `LMI3DCamera/ShowImage`, {  //params参数必写 , 如果没有可传参数，传{}以 JSON.stringify(cmdParam1)
		params: { FileName: FoamImageFile.value }
	})
		.then(function (response) {
			console.log('DrawImage ok');
			console.log(response);

			console.log('response.request.responseURL');
			console.log(response.request.responseURL);
			FoamImageFileURL.value = response.request.responseURL

			console.log('FoamImageFile ', FoamImageFile)
			//FoamImageFile.value=response.data
			return response.data;
		})
		.catch(function (error) {
			//ElMessage.error(cmd + '命令执行异常！' + error)
			console.log(error);
		});
}