URL изображения области не обновляется и отображается в представлении (AngularJS)

#javascript #angularjs #firebase #firebase-storage

#javascript #angularjs #firebase #firebase-хранилище

Вопрос:

Я новичок в AngularJS и пытаюсь получить ссылку на изображение из Google Firebase, которая помещается в переменную области видимости. Это работает, когда я выполняю извлечение URL-адреса в действии, используя другой контроллер, прежде чем этот загрузит его. Однако при получении его в этом контроллере мой div почему-то не хочет отображать изображение. Я проверил с помощью простого ng-bind, обновлена ли переменная области видимости, и это так. Однако изображение div в представлении остается пустым. Кто-нибудь знает, как я могу получить представление для отображения изображения?

Контроллер:

 $scope.profilepicture = null;

var storageRef = firebase.storage().ref();
var path = "profilepictures/"   userFactory.getUser().uid   "/profilepicture";
var profilePicRef = storageRef.child(path);

profilePicRef.getDownloadURL().then(function(url) {
    $scope.$apply(function(){
        $scope.profilepicture = url;
    });
}).catch(function(error) {
});
  

Вид:

 <div ng-click="getImage()" ng-style="{'background-image' : 'url({{profilepicture}})'}" style="width:100px; etc...></div>
  

Комментарии:

1. Можете ли вы создать скрипку (с какой-нибудь учетной записью Firebase, например)?

2. Я действительно не думаю, что решение должно быть найдено там. URL получен и является правильным. Он больше не обновляет div, чтобы найти изображение, поэтому мне интересно, как я могу перезагрузить свой элемент div и отразить изменение переменной области видимости.

3. Я тоже так не думаю, но хотел бы немного поиграть с чем-нибудь, потому что я понятия не имею, что сейчас не так.

Ответ №1:

 ng-style="{'background-image' : 'url('   profilepicture   ')'}"
  

Я только что обнаружил проблему. URL-адрес в стиле ng должен был быть написан следующим образом: ‘ значение ‘

Спасибо за вашу помощь 🙂

Ответ №2:

Попробуйте сделать это, удалив оттуда фигурные скобки, но просто убедитесь, что вы получаете правильное значение profilepicture.

 <div ng-click="getImage()" ng-style="{'background-image' : 'url(profilepicture)'}" style="width:100px; etc...></div>
  

Комментарии:

1. Я пробовал это, но, к сожалению, это тоже не работает. ‘{{}}’ также работал в моей предыдущей реализации, где URL-адрес был сохранен на заводе.