将图像渲染到剃须刀视图 Cshtml。角度问题

Question

“allitems”包含在组合框中选择的类别的所有项目。那部分代码工作正常。

我将图像作为每个项目的二进制数据保存在数据库中。当显示项目时，应呈现项目的图像。为此，我必须在渲染之前将项目的 ID 保存在 ASP .Net 控制器中，因为“RenderImage”需要项目的 ID。这是通过在 AngularJS 控制器中调用“saveItemId”来完成的。

但是图像的渲染是非常不可预测的。重复调用“saveItemId”，但不调用 RenderImage。

在 AngularJS 控制器或 ASP .Net MVC 控制器中调用方法/保存 ID 没有问题。

<div dir-paginate="r in allitems | filter:q | itemsPerPage: pageSize" current-page="currentPage" ng-init ='saveItemId(r.ID)' class="ag-fresh">
<div style="float:left">
    <div class="col-xs-3">
        <div style="width:200px;">
            <div class="product-image-wrapper">
                <div class="single-products">
                    <div class="productinfo text-center">
                        <img src="@Url.Action("RenderImage")" height="84" width="84"/>
                        <br/>
                            <h>{{r.Price}}</h>
                            <p>{{r.Name}}</p>
                            <button class="btn btn-default add-to-cart" ng-click="AddToCart(r.ID)">Add to cart</button>
                            {{successTextAlert}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

1. 它似乎 RenderImage 是控制器范围内的 js 变量。如果是这样，则需要用括号调用，例如{{RenderImage}}

2. 尝试使用 'ng-src' 而不是 'src' 属性，用于 img 元素，如在 https://docs.angularjs.org/api/ng/directive/ngSrc#!

Answer 2

这可以正常工作： <img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(r.InternalImage)}}" height="84" width="84"/> 我在角度控制器中添加了 arrayBufferToBase64。