防止图像在 AngularJs 中呈现答案

【问题标题】：Preventing image from rendering in AngularJs防止图像在 AngularJs 中呈现
【发布时间】：2012-09-10 14:14:50
【问题描述】：

我有这个 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 时有什么方法可以防止这种情况发生？

【问题讨论】：

没有这个问题 - 想知道这是否是浏览器问题。你用什么浏览器试试这个？
我在 chrome 和 firefox 上试过——都是最新版本
对不起，伙计，从头开始在本地项目上尝试过这个，从来没有得到 404。

标签： javascript jquery angularjs

【解决方案1】：

要解决这个问题，您可以：

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

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

【讨论】：

谢谢，我最终使用了“解决”问题的 ng-repeat。不是我想要的，但它有效=)

【解决方案2】：

我通过使用来自http://angular-ui.github.com/ 的 ui-if 对此进行了改进 ui-if 不是使用 ng-hide/ng-show 隐藏/显示，而是根本不渲染元素。

<div ui-hide='ImageHasBeenUploaded'>
    <img ng-src='/some/image/path/{{imageName}}/>
</div>

【讨论】：