AngularJS ng-src图像路径

前端之家收集整理的这篇文章主要介绍了AngularJS ng-src图像路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
关于使用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}}在重新加载时又回来了 – 一个应用程序错误

解决方法

代码更改为以下内容.

您需要检查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>

猜你在找的Angularjs相关文章