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路径图像

回答

相关问题