Question

我的程序上有一张想要更改的照片，尝试了几次，更改了路线，但没有任何变化，图像是旧的。为什么？我该如何更改？

<div class="stickedLogo hidden-xs">
        <div class="text-left padTop20 padLft30">
            <img ng-src="https://i.stack.imgur.com/P0sKZ.png" alt="logo" class="stickImg">
        </div>
    </div>

谢谢！

Answer 1

您可以点击以下简单功能更改图像： HTML

 <div>
      <button ng-click="change_image()" class="btn">Change img</button>
            <div class="text-left padTop20 padLft30">
                <img ng-src="{{image_url}}" alt="logo" class="stickImg">
            </div>
        </div>

JS：

 $scope.image_url = 'https://i.stack.imgur.com/P0sKZ.png';

 $scope.change_image = function() {
   $scope.image_url = "https://picsum.photos/" + Math.floor(Math.random() *500);;
   console.log($scope.image_url)
}

朋克：http://plnkr.co/edit/eNMsxlsfyW9xUGOmcc2P?p=preview

Answer 2

下面，我提供了一个简单的工作示例，其中包含ng-src和一个带有变量的控制器，您可以从中更改图像和/或名称。

在此处回答的评论之一中，您说图像的路径为：ng-src="{{imageRoot}}{{business_folder}}/{{business_logo}}";我建议您验证上面的代码是否导致有效路径。您只需将字符串{{imageRoot}}{{business_folder}}/{{business_logo}}放在img标记上方，并验证是否没有缺少的/或//。路径中实际上可能存在问题，而不是显示图像的实际代码。

干杯！

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.imageSettings = {
      name: "My cute image",
      imageURL: "https://cdn3.iconfinder.com/data/icons/cat-force/256/cat_acrobat.png"
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  <div class="stickedLogo hidden-xs">
    <div class="text-left padTop20 padLft30">
      {{ imageSettings.name }} <br>
      <img ng-src="{{ imageSettings.imageURL }}">
    </div>
  </div>
</div>

修改：其他信息

如果图像仍然没有出现并且路径正确，请在更改路径变量后立即输入以下代码：

setTimeout(function() {
    $scope.$apply();
}, 0);

有时您需要强制更改才能生效。原因是角度的双向绑定使用脏检查。这是good article，用于了解有关angular的脏检查的信息。 $ scope。$ apply（）开始一个$ digest循环。这将应用绑定。本质上，绑定发生在$ digest周期内（如果值被认为是不同的）。

img ng-src记住图像路径

2 个答案: