Question

我有一个小问题如何处理加载图像，因此浏览器不会尝试加载它无法找到的图像，因为angularjs尚未启动。我怎么能这样做？，有一些ng-if？或者ng-hide / show ?,但是在angularjs开始之前它仍然会找到images标签。

如果您也可以帮我解决此问题：我需要一直有一个标准的图像，但如果我的网站上有一个广告系列，我需要用一些来自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">

Answer 1

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

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

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

Answer 2

您无法在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">

Answer 3

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

$scope.campaign = "defaultImage.jpeg";

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

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

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

src仅在$scope.campaign出现时才会获得。

angularjs - 加载图像问题

3 个答案: