无法在ASP.NET MVC中显示S3存储桶中的上传图像

Question

我尝试在asp.net mvc中显示来自s3存储桶的图像，我得到了base64编码的响应。但在视图中不显示图像

第一张图片采用二进制编码，而不是Base64。所以我使用_arrayBufferToBase64（）函数转换为base64

这是我的看法

   <img data-ng-src="data:image/jpeg;charset=utf-8;base64,{{str}}" 
   alt="MyImage">  

这是我的MVC控制器

   [HttpGet]
    public ActionResult GetReadObject()
    {
        string responseBody = "";
        try
        {
            using (IAmazonS3 s3client = new AmazonS3Client(_awsAccessKey, _awsSecretKey, RegionEndpoint.USEast1))
            {
                GetObjectRequest request = new GetObjectRequest
                {
                    BucketName = _bucketName,
                    Key = keyName
                };
                using (GetObjectResponse response = s3client.GetObject(request))
                using (Stream responseStream = response.ResponseStream)
                using (StreamReader reader = new StreamReader(responseStream))
                {
                    string title = response.Metadata["x-amz-meta-title"];
                    Console.WriteLine("The object's title is {0}", title);

                    responseBody = reader.ReadToEnd();
                }
            }

        }
        catch (Exception ex)
        {

        }

        return Json(responseBody, JsonRequestBehavior.AllowGet);
    }

这是我的控制器

app.controller('myCtrl', function ($scope, $http) {
 $http({
    method: 'GET',
    url: '/User/Dashboard/GetReadObject',
    responseType: 'arraybuffer'
   }).then(function (response) {
    alert("1");
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    $scope.getImage = str;
    alert(str);
    console.log(str);
    // str is base64 encoded.
},
   function (response) {
    console.error('error in getting static img.');
});


function _arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}
})

Answer 1

你应该试试

<img data-ng-src="data:image/jpeg;charset=utf-8;base64,{{getImage}}" 
   alt="MyImage">

正如您在控制器中提到的，str 是简单的 JavaScript 变量，您无法将其与 View 一起使用。当您将 str 值分配给 $scope.getImage ($scope.getImage = str)时，您可以在视图中使用带有角度表达式的 {{getImage}} 。