为什么即使出现图像，ng-src 也会出现 404 错误? [英] Why am I getting a 404 error with ng-src even though image is appearing?

问题描述

我正在使用 ng-src 显示图像:

I am displaying an image with ng-src:

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

找到并显示正常，但是在 Firebug 控制台中，我收到此错误:

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

NetworkError: 404 Not Found - http://localhost/learntracker/customImages/.png"

就好像这是在变量存在之前执行一样.

as if this is being executed before the variables exist.

此 HTML 代码存在于 <div ng-cloak ng-app="mainModule"> 和 ng-cloak变量存在.

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.

为什么会出现这个错误，我该如何消除它?

推荐答案

看起来您可能正在异步加载填充 currentBook 对象的数据.因此，在上一个摘要周期中，ng-src 指令将渲染图像的 src，而 currentBook.idcode 没有值，一旦它被填充到范围内，另一个摘要循环运行更新图像.所以前一个导致 404.你可以在图像上放置一个 ng-if.

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

但这似乎已在 1.3.x 版本的 angular 中修复，以防止在扩展所有插值以获取值之前渲染图像 src.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-cloak 只是有用而不是在加载角度时简要公开插值表达式.

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

一些附加信息(由@zeroflagL 提供):

Some additional info (Courtesy @zeroflagL ) :

Angular 1.3.x 版 ng-src 使用全有或全无插值(interpolateProvider 的功能添加)，这意味着除非解决所有绑定的插值，否则它不会扩展指令.您可以在编译提供程序源.

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'),

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