渲染图像到剃刀查看Cshtml。角度问题

时间:2016-05-15 11:23:39

标签: angularjs asp.net-mvc image asp.net-mvc-4 razor

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

我将图像保存在数据库中作为每个项目的二进制数据。显示项目时,应呈现项目的图像。为此,我必须在渲染之前在ASP .Net控制器中保存项目的ID,因为“RenderImage”需要Item的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>

2 个答案:

答案 0 :(得分:0)

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

  2. 尝试使用'ng-src'代替'src'属性,对于img元素,如下所述 https://docs.angularjs.org/api/ng/directive/ngSrc#!

答案 1 :(得分:0)

这适用于: <img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(r.InternalImage)}}" height="84" width="84"/> 我将arrayBufferToBase64添加到角度控制器。