AngularJS NG-SRC路徑圖像

關於以顯示圖像使用ng-src，這個代碼在運行時的工作 - 但不是在初始頁面加載：AngularJS 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}}在重載時會回來 - 一個應用程序錯誤！

來源

2015-01-13 bob.mazzo

你正在使用什麼角度的版本，你是否異步設置'widget.initImage'？這個答案有幫助嗎？ http://stackoverflow.com/questions/27880972/why-am-i-getting-a-404-error-with-ng-src-even-though-image-is-appearing/27881056#27881056 – PSL

將您的代碼更改爲以下。

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

使用NG-如果widget.initImage

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

來源

2015-01-13 19:16:35 dhavalcengg

我在檢查納入您的回覆/建議中。謝謝。 –

是的，看起來這個黑客應該用1.2.x angular來解決問題。不過1.3.x他們修正了ng-src。解釋可以在這個答案中找到http://stackoverflow.com/questions/27880972/why-am-i-getting-a-404-error-with-ng-src-even-though-image-is-appearing/27881056 ＃27881056 – PSL

我使用angular-1.3.5，我認爲我的問題是dhavalcengg說的。重新加載時可能無法初始化。 –

我建議你使用這樣的NG-初始化指令......

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

來源

2015-01-13 19:34:52 micronyks

'ngInit的唯一合適的用法是爲了重用ngRepeat的特殊屬性，如下面的演示所示。除此之外，您應該使用控制器而不是ngInit來初始化作用域上的值。<< - ** [See]（https://docs.angularjs.org/api/ng/directive/ngInit）** – PSL

AngularJS NG-SRC路徑圖像

回答

相關問題