Question

我有一个包含图像的div（用于预览），仅在设置图像src时显示。我的问题是我得到了404，因为一开始就没有图像集。

<div ng-show="imgSrc" class="preview">
    <div class="menu">
        <a ng-click="imgSrc = false" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
        <a class="btn btn-primary" href="{{ imgSrc }}">
             <i class="fa fa-download"></i>Download</a>
    <img ng-src="{{ imgSrc }}" /> /* <--------------------- here */
</div>

这是一个好方法吗？或者我应该删除图像标记，并在设置img时附加它？在这种情况下，我如何追加元素？

Answer 1

404表示服务器上不存在图像，但这并不意味着imgSrc未定义。

如果要在定义imgSrc之前隐藏元素，请使用nh-show指令，就像您已经使用的那样。另外，请确保imgSrc没有默认值。

如果要在UI上显示图像之前检查图像是否存在，则必须对该URL执行ajax请求并检查返回的响应。

修改

同样ng-click="imgSrc = false"应为ng-click="imgSrc = ''"。

Answer 2

好的我理解404的原因。我的imgSrc变量初始化为false，所以它试图加载：

http://localhost:9000/false

一个简单的imgSrc =＆＃39;＆＃39;而是解决问题。

Answer 3

单击关闭链接时，不要将imgSrc设置为false，而是将其设置为空字符串。这仍然会导致ng-show正确隐藏它，但不会导致浏览器尝试抓取http://localhost:9000/false。

e.g。将您的标记更改为：

    <div ng-show="imgSrc" class="preview">
        <div class="menu"> 
            <a ng-click="imgSrc = ''" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
            <a class="btn btn-primary" href="{{ imgSrc }}" target="_blank">
             <i class="fa fa-download"></i>Download</a>

            <img ng-src="{{ imgSrc }}"></img>
        </div>
    </div>

查看demo jsFiddle。

Answer 4

像这样为

创建图像加载指令

指令：

app.directive('imageonload', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                 $rootScope.$broadcast('updateContent');
            });
        }
    };
});
HTML :
<div ng-show="isImage" class="preview">
    <div class="menu">
        <a ng-click="imgSrc = false" class="btn btn-primary">
             <i class="fa fa-times"></i>Close</a>
        <a class="btn btn-primary" href="{{ imgSrc }}">
             <i class="fa fa-download"></i>Download</a>
    <img ng-src="{{ imgSrc }}" imageonload /> /* <--------------------- here */
</div>

contoller：

$scope.$on('updateContent', function () {
        console.log('receive');
        $scope.isImage = true;
    });

ng-src抛出404因为我的img尚未设置

4 个答案:

修改