避免在角JS中破碎的图像

我是AJS的新手，所以这可能听起来很愚蠢，但我想知道如何避免当图像URL来自表达式或来自用户输入的图像URL。也许这可以解释：避免在角JS中破碎的图像

<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>

现在我有一个文件夹中的一些图片，我想，当我在他们出现在页面上的文本栏中键入它。但我们总是有这个破碎的图像显示，直到我们没有输入确切的图像名称。所以有什么办法可以避免破碎的图像出现。感谢

来源

2014-09-05 coljadu

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

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

来源

2014-09-05 17:54:37 Vamsi

这里的时候ngSrc的值被改变，直到它看到了“负载”事件隐藏图像元素的指令，然后它显示元件(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">

来源

2014-09-05 18:41:21

避免在角JS中破碎的图像

回答

相关问题