Unable to display upload images from s3 bucket in asp.net mvc - angularjs

Question

I try to display images from s3 bucket in asp.net mvc I get the base64 encoded response. but is not display image in the view
first image is in binary encoding, rather than Base64.
so I convert into base64 with this
function _arrayBufferToBase64()
This is my view
<img data-ng-src="data:image/jpeg;charset=utf-8;base64,{{str}}"
alt="MyImage">
This is my MVC controller
[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);
}
This is my controller
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

You should try
<img data-ng-src="data:image/jpeg;charset=utf-8;base64,{{getImage}}"
alt="MyImage">
As you mentioned in your controller, str is simple javascript variable that you could not use with View. As you assign str value to $scope.getImage ($scope.getImage = str) You can use {{getImage}} with angular expression in your View.