javascript - 通过 AngularJS 加载时，动画 GIF 无法在 Firefox 中播放

Question

我是 Angular 1 的初学者。我的 Controller 中有一个函数可以根据 HTML 表单中的某些参数生成各种动画 GIF 文件的 URL。然后我有一个应该显示 GIF 文件的 img 标签，如下所示:

<img alt="preview" src="{{ctrl.previewURL()}}"/>

基本上，它有效。当我更改输入字段中的值时，图像会相应更新。然而，在第三张图片以这种方式加载后，GIF 停止播放它们的动画(尽管正确的文件仍在加载)，只显示一帧。无论我尝试以何种顺序加载它们，都会发生这种情况，因此这不是文件本身的问题。

有趣的是，这个问题似乎只出现在 Firefox 中(我使用的是 48 版)。这一切都在 Microsoft Edge 中完美运行。我还没有机会尝试其他浏览器。

有没有办法让它在 Firefox 中也能正常工作？或者是否有更好的做法来使用 Angular 做这样的事情？

Answer 1

代替 src 使用 ng-src

浏览器首先将 src 视为“{{ctrl.previewURL()}}”，直到 Angular 开始工作，所以使用 ng-src 并且图像将仅以 Angular 加载。

你的代码:

<img alt="preview" ng-src="{{ctrl.previewURL()}}"/>