I am facing an issue with my code where I am unable to pass a binary image to a modal. The image displays correctly as a jpeg in the view, and I need it to display the same way in the modal as well.
View
<h4 style="color: #3953a5; font-size:22px;"><strong>{{item.ItemName}}</strong></h4>
<a ng-click="getIceDesignImage('data:image/jpg;base64,'+item)"><img src="{{'data:image/jpg;base64,'+item.Image}}" style="height:150px; width:150px;" alt="post img" class="pull-left img-responsive thumb margin10 img-thumbnail"></a>
<h5 style="font-size:18px"><strong>${{item.ItemPrice}}</strong></h5>
<article>
<p style="height: 120px; font-size: 18px">
{{item.ItemDescription}}
</p>
</article>
<hr />
</div>
</div>
<script type="text/ng-template" id="myModalContent">
<div class="modal-body">
<h3>Title</h3>
<img src="{{'data:image/jpg;base64,'+item.Image}}" style="height:150px; width:150px;">
</div>
<div class="modal-footer">
</div>
Controller
$scope.currentItem = null;
$scope.getIceDesignImage = function (item) {
$scope.currentItem = item;
var modalInstance = $modal.open({
templateUrl: 'myModalContent',
controller: 'MainCtrl',
resolve: {
currentItem: function () {
return $scope.currentItem;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
}