加载图像问题

loading images issues

本文关键字：问题 图像 加载      更新时间：2023-09-26

我有一个如何处理加载图像的小问题，这样浏览器就不会尝试加载它找不到的图像，因为 angularjs 还没有启动。我该怎么做？，有一些ng-if？或ng-hide/show？，但它仍然在AngularJS启动之前找到图像标签。

如果您也可以帮助我如何处理此问题：我需要一直有一个标准图像，但是如果我的网站上有一个广告系列，我需要用我从HTTP调用中获得的一些数据"覆盖"该图像

STANDARD IMAGE
<img class="img-responsive hidden-sm hidden-xs" src="/images/header.jpg">            
<img class="img-responsive hidden-lg hidden-md" src="/images/header-mobile.jpg">
CAMPAIGN IMAGE
<img class="img-responsive hidden-sm hidden-xs" src="/images/{{campaign}}.jpg">            
<img class="img-responsive hidden-lg hidden-md" src="/images/{{campaign}}-mobile.jpg">
您可以使用

ng-src .在此属性中，可以使用{{campaign}}标记。

在您的情况下，它应该适用于：

<img class="img-responsive hidden-lg hidden-md" ng-src="/images/{{campaign}}-mobile.jpg">

您不能在 src 标记中使用 angualar 表达式，因为浏览器会尝试从字面上获取它，而不计算角度表达式。

你必须使用 ng-src 指令。

在这里你可以得到更多信息： ng-src

例：

STANDARD IMAGE
<img class="img-responsive hidden-sm hidden-xs" src="/images/header.jpg">            
<img class="img-responsive hidden-lg hidden-md" src="/images/header-mobile.jpg">
CAMPAIGN IMAGE
<img class="img-responsive hidden-sm hidden-xs" ng-src="/images/{{campaign}}.jpg">            
<img class="img-responsive hidden-lg hidden-md" ng-src="/images/{{campaign}}-mobile.jpg">

您可以在控制器中设置搁浅图像

$scope.campaign = "defaultImage.jpeg";

然后你可以使用指令ng-src

你可以在这里使用它，如下所示，

<img class="img-responsive hidden-sm hidden-xs" ng-src="/images/{{campaign}}.jpg">

只有当$scope.campaign存在时，src才会得到。

相关文章：