Question

我是AJS的新手，所以这可能听起来很傻但我想知道当图像URL来自表达式或来自用户输入时如何避免损坏的图像。也许这解释了：

<html ng-app>
<head>

</head>

<body>

Name :<input type="text" ng-model="batman" />

<img ng-src="{{batman}}.png" />


<script src="script/angular.min.js"></script>
</body>
</html>

现在我在该文件夹中的照片很少，我希望当我在文本栏中输入它们时，它们会显示在页面上。但是我们总是将这个破碎的图像显示出来，直到我们没有输入确切的图像名称。那么有什么办法可以避免破碎的图像出现。谢谢

Answer 1

<div ng-if="batman">
    <img ng-src="{{batman}}.png" />
</div>

如果确实存在蝙蝠侠模型，那么只有这个div会呈现

Answer 2

这是一个指令，当ngSrc的值发生变化时，它会隐藏图像元素，直到它看到'load'事件，然后它会显示元素(plunker)：

app.directive('hideUntilGood', function() {
  return {
    restrict: 'A',
    multiElement: true,
    link: function(scope, element, attrs) {
      attrs.$observe('ngSrc', function (value) {
        // fix where ngSrc doesn't update when blank
        if (!value || value.length == 0) {
          element.attr('src', value);
        }
        element.css("display", "none");
      });
      element.bind('load', function() {
        element.css("display", "");
      });
    }
  };

}）

用法：

<img hide-until-good ng-src="{{batman}}.png">

避免角度JS中的破碎图像

2 个答案: