Question

我是角色的新手，我正在创建一个应用程序，您可以在输入框中输入时搜索角色。现在在输入名称时，让我们说“超人”，你会看到一个破碎的图像，直到你输入完整的名字，一旦你输入全名“超人”，你的图像就会破坏图像。

我读到使用ng-src会解决这个问题，但它也无法正常工作，这里是我的代码，我正在使用crome。

<!doctype html>
<html>
<head>
    <title> Project Zippy</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>
<body>
    <header>
        <h1> Zippy...</h1>
    </header>
    <section>
        <div ng-app="">
            <input type="text" ng-model="superhero"><br />
            <img ng-src="images/{{superhero}}_tn.png">

        </div>
    </section>
    <script src="script/angular.min.js"></script>
    <script src="script/angular-route.min.js"></script>

</body>
</html>

Answer 1

您可以使用此指令：

app.directive('onError', function() {
  return {
    restrict:'A',
    link: function(scope, element, attr) {
      element.on('error', function() {
        element.attr('src', attr.onError);
      })
    }
  }
})

示例：

<img ng-src="{{url}}" on-error="http://rationalwiki.org/w/images/f/f5/Error_icon.svg" />

工作示例：http://plnkr.co/edit/avGEDb?p=preview

但是为错误图片网址添加了透明的1x1图片。

使用ng-src标记破碎的图像

1 个答案: