Question

我正在尝试使用data-ng-src在我的角度应用程序中显示图片。我从我的数据库字段中获取一个名为＆＃34; pic＆＃34;的值。例如，假设字段＆＃34; pic＆＃34; 的返回值 125 （这是一个整数值）。我的服务器上有一个名为 125.jpg 的文件位置

的图像文件

\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\

我需要在我的HTML中呈现这一点，但我不知道如何使用绑定{{e.pic}}中的值附加文件位置。我需要{{e.pic}}来取件

\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\125.jpg

但是当前{{e.pic}}的整数值为125（因为它是从sql server db返回的）。如何使{{e.pic}}看到\ someserv \ zpicturesFiles \ zpicturesResources \ Database \ VFP \ PhotoID \ itc \ portrait \ 125.jpg的值。这是一个ng-repeat。到目前为止，我的代码是执行以下建议的。

<section class="mainbar" data-ng-controller="employees as vm">
....
    <div class="padd" data-ng-repeat="e in vm.employees">
        <div class="user">
             <img data-ng-src="{{'\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\' + e.pic + '.jpg' }}">  
                  class="img-polaroid user-pic"/>

我收到如下错误：

错误：[$ parse：lexerr] Lexer错误：列的未终止引用 97-99 [＆＃39;在表达中 [＆＃39; \ someserv \ zpicturesFiles \ zpicturesResources \数据库\ VFP \ PHOTOID \ ITC \肖像\＆＃39; + e.pic +＆＃39; .jpg＆＃39; ]。 http://errors.angularjs.org/1.2.12/ $解析/ lexerr P0 =未终结％20quote＆安培; P1 = S％2097-99％20％5B＆＃39;％20％5D＆安培; P2 =＆＃39;％5C％5Csomeserv％5CzpictureFiles％5CzpicturesResources％ 5CDatabase％5CVFP％5CPhotoID％5Citc％5Cportrait％5C＆＃39;％20％2B％20e.pic％20％2B％20＆＃39; .JPG＆＃39;％20 在http：// localhost：56014 / scripts / angular.js：78：12

什么不喜欢？

感谢尼克

Answer 1

Fiddle Example。我添加e.pick && '\...'的原因是因为ng-src将隐藏，直到值有效。在小提琴中，您会看到broken会因图像损坏而闪烁，直到pathExt被设置为止。

使用：

<img data-ng-src="{{e.pic && '\fileserver\pictures\' + e.pic + '.jpg' }}"

或者在您的示波器上创建一些东西以使其更清洁：

$scope.getImage = function(e){
    return e && e.pic && ('\fileserver\pictures\' + e.pic + '.jpg');
}

HTML：

<img data-ng-src="getImage(e)" >

我如何ng-src绑定图像？

1 个答案: