AngularJS NG-SRC路径图像 [英] AngularJS ng-src path to image

问题描述

关于以显示图像使用 NG-SRC ，这code运行时的工作 - 但不是在初始页面加载：

Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:

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

在我的初始页面加载我得到的错误：

on my initial page load I get the error:

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

但在运行时，当我拖动和图像拖放到我的仪表盘，前端不会再抱怨了。

Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.

我不知道，我使用的仪表板框架动态地添加一个div到我的网页，然后渲染图像;然而，为什么它不会在这个时候抱怨？

I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?

在换句话说，我试图避免使用这样的完整路径：

In other words, I'm trying to avoid using the full path like this:

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

**** ****更新

**** UPDATE ****

code的该位工作的，我并不需要指定... / .. /相对路径。

This bit of code works, and I did not need to specify ".../../" relative path.

  <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}}已在重新加载回来的空 - 应用程序错误

In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !

推荐答案

更改您code到下面。

Change you code to following.

您需要检查widget.initImage被初始化。之前将其传递给NG-SRC。

You need to check widget.initImage is initialized or not. Before passing it to ng-src .

使用NG-如果widget.initImage

Use ng-if on 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>

这篇关于AngularJS NG-SRC路径图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！