img ng-src запомнить путь к изображению

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

Ниже я привел простой рабочий пример с ng-src и контроллером с переменной, из которой вы можете изменить изображение и / или имя.

В одном из комментариев здесь выговорит, что путь к изображению: ng-src="{{imageRoot}}{{business_folder}}/{{business_logo}}";Я рекомендую вам проверить, приводит ли приведенный выше код к правильному пути.Вы можете просто поместить строку {{imageRoot}}{{business_folder}}/{{business_logo}} над тегом img и проверить, нет ли пропущенных / или //.Возможно, проблема в пути, а не в самом коде для отображения изображения.

Cheers!

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);

Иногда вам нужно заставить изменения вступить в силу.Причина в том, что двусторонняя привязка в angular использует грязную проверку.Это хорошая статья , чтобы прочитать о грязной проверке angular.$ scope. $ apply () запускает цикл $ digest.Это будет применять связывание.По сути, привязка происходит во время цикла $ digest (если значение считается другим).

Answer 2

Вы можете изменить свое изображение с помощью простой функции, здесь после нажатия: 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