Question

我有一些代码在将视图中的数据传递给模态时效果很好。但是我现在正试图将二进制图像传递给模态，它不起作用。图像在视图中显示为jpeg，这也是我在模态中所需要的。

查看

  <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>

控制器

 $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 () {

    });
}

Answer 1

我知道这已经过时了，但对于任何偶然发现此事的人（就像我一样），img标签都是格式错误的。它应该看起来像：

<img src="data:image/jpg;base64,{{item.Image}}" style="height:150px; width:150px;">

使用角度将二进制图像传递给模态

1 个答案: