Question

我需要将默认图像放入img元素中。

如果我在加载图片时出错或图片为null / undefined我想放置默认图片

我有下一个标记：

//控制器

$scope.img_default="//ssl.gstatic.com/accounts/ui/avatar_2x.png"

//标记

<img  onerror="this.src='+{{img_default}}+'"
                    class="drop-box-filled-totem img-responsive"  
                    style="width:100%; height: 100%; max-height: 350px;"
                    ng-src="{{mobileCart||img_default}}"/>

但它不起作用。

如果我将图片网址直接用于html，则其工作原理如下。

有没有办法让它通过控制器使用数据绑定工作？

<img  onerror="this.src='//ssl.gstatic.com/accounts/ui/avatar_2x.png'"
                    class="drop-box-filled-totem img-responsive"  
                    style="width:100%; height: 100%; max-height: 350px;"
                    ng-src="{{mobileCart||'//ssl.gstatic.com/accounts/ui/avatar_2x.png'}}"/>

Answer 1

下面的代码对我来说很好用

<img  class="drop-box-filled-totem img-responsive"  
      style="width:100%; height: 100%; max-height: 350px;"
      ng-src="{{mobileCart||img_default}}"/>

Here is the plunker，我认为添加onerror attr不是你应该做的，因为它没有被告知angularjs $digest周期。

根据我的理解，在onerror上添加了一些事件which is triggered。你可以在控制器本身做同样的检查。只要考虑到angularjs有自己的消化周期，应该注意。

如何使用img元素使数据与angularJS绑定

1 个答案: