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>