防止在AngularJs中渲染图像

Preventing image from rendering in AngularJs

本文关键字：图像 AngularJs      更新时间：2023-09-26

我有这个jsFiddle：http://jsfiddle.net/HMZuh/1/

其中包含此html

<div ng-app ng:controller="ShowHideController">
    <div ng-show='showMe'>
        <img ng-src="{{imageSource}}"/>
    </div>
    <button ng-click='showImage()'> show image </button>
<div>

这个脚本：

function ShowHideController($scope) {
    $scope.showMe = false;
    $scope.imageSource = '';
    $scope.showImage = function(){
        $scope.showMe = true;
        $scope.imageSource = 'https://www.google.com/images/srpr/logo3w.png';
    }
}

我得到了一个404，当源尚未设置时找不到图像，当showMe为false时，有什么方法可以防止这种情况发生吗？

​

要解决此问题，您可以：

  1. 使用ng-repeathttp://jsfiddle.net/bGA4T/
  2. 使用$compile并声明您自己的指令
  3. 编写自己的ng-src指令

我认为有很多方法可以解决这个问题。

我通过从http://angular-ui.github.com/ui-if只是不渲染元素，而不是使用ng-hide/ng-show来隐藏/显示。

<div ui-hide='ImageHasBeenUploaded'>
    <img ng-src='/some/image/path/{{imageName}}/>
</div>
相关文章：