AngularJS ng-src圖像路徑

Question

關於使用ng-src顯示圖像，此代碼在運行時工作 - 但不在初始頁面加載時：

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
    <img ng-src="../../Images/{{widget.initImage}}"  />
    <div class="caption">Click to configure</div>
</div>

在我的初始頁面加載我得到錯誤：

GET http://localhost:33218/Images/ 403 (Forbidden)

然而在運行時，當我將圖像拖放到儀表板上時，前端不再抱怨了。

我確實意識到我正在使用的儀表板框架是在我的頁面上動態添加div，然后渲染圖像; 但是，為什么它此時不抱怨？

換句話說，我試圖避免使用這樣的完整路徑：

<img ng-src="http://localhost:33218/Images/{{widget.initImage}}"  />

****更新****

這段代碼可以工作，我不需要指定“... / .. /”相對路徑。

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
    <img ng-src="Images/{{widget.initImage}}"  />
    <div class="caption">Click to configure</div>
</div>

另外，我的{{widget.initImage}}在重新加載時又回來了 - 一個應用程序錯誤！

Answer 1

將代碼更改為以下內容。

您需要檢查widget.initImage是否已初始化。 在將它傳遞給ng-src之前。

在widget.initImage上使用ng-if

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
                <img ng-src="../../Images/{{widget.initImage}}"  ng-if="widget.initImage" />
                <div class="caption">Click to configure</div>
  </div>

Answer 2

我建議你像這樣使用ng-init指令......

<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
                    <img ng-src="{{myImgUrl}}"  />
                    <div class="caption">Click to configure</div>
      </div>

在你的控制器中，

$scope.getImgUrl=function()
{
    $scope.myImgUrl=  //get your img url whatever it is...

    // You can also set widget.showInitImage variable here as well...
}