为什么我会得到一个404错误与NG-SRC即使图像出现？ [英] Why am I getting a 404 error with ng-src even though image is appearing?

问题描述

我显示与 NG-SRC 图片：

＆LT; IMG风格=WIDTH：100px的NG-SRC ={{absolutePath}} customImages / {{currentBook.id code}} PNG/＆GT;

这是发现和显示细腻，然而，在萤火控制台，我得到这个错误：

which is found and displays fine, however in Firebug console, I am getting this error:

NetworkError：404未找​​到 - HTTP：//localhost/learntracker/customImages/.png

如，如果这存在变量之前正在执行

as if this is being executed before the variables exist.

本HTML code一＆LT内部存在; DIV NG-斗篷NG-应用=mainModule＆GT; 和 NG-斗篷我的理解存在变量之前停止执行任何

This HTML code exists inside a <div ng-cloak ng-app="mainModule"> and ng-cloak I understand to stop any executing before the variables exist.

为什么发生这个错误，我怎么能燮preSS呢？

推荐答案

看起来你可能会被加载其中填充 currentBook 对象异步的数据。因此，$ P $中pvious消化周期， NG-SRC 指令会呈现的src图像与 currentBook.id $ C没有价值$ C ，一旦它得到的范围内居住，另一摘要周期运行时会更新图像。因此，previous导致404你可以将 NG-如果图像。

Looks like you might be loading the data which populates currentBook object asynchronously. So during the previous digest cycle, ng-src directive would have rendered the src for the image with no value for currentBook.idcode and once it gets populated on the scope, another digest cycle runs updating the image. So the previous causes the 404. You could place an ng-if on the image.

例如： -

<img style="width: 100px" ng-if="currentBook.idcode" 
     ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>

您可以看到一个小的演示实施 这里

You could see an small demo implementation here

的但这似乎的，在以图像的src prevent渲染所有的插值扩展到获取值之前已经固定的角1.3.x的版本。 Plnkr

But this seems to have been fixed with 1.3.x version of angular, in-order to prevent rendering of image src before all the interpolations are expanded to get values. Plnkr

NG-斗篷 时才有所帮助不是简单地暴露插前pression而角加载。

ng-cloak is only helpful not to expose interpolation expression briefly while the angular is loading.

一些附加信息（礼貌@zeroflagL）：

Some additional info (Courtesy @zeroflagL ) :

通过角1.3.x版NG-SRC利用全有或全无插补（的功能除了interpolateProvider ），这意味着它不会扩大该指令，除非所有绑定插值得到解决。你可以看到在这个映射<一个href=\"https://github.com/angular/angular.js/blob/1eb6036d29687f7b675ff5b28f6cbf105fcb611b/src/ng/compile.js#L707\"相对=nofollow>编译提供商源。

With angular version 1.3.x ng-src makes use of all or nothing interpolation (feature addition to interpolateProvider), meaning it will not expand the directive unless all the bound interpolations are resolved. You can see this mapping in the compile provider source.

ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),

这篇关于为什么我会得到一个404错误与NG-SRC即使图像出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！