URL-адрес фонового изображения в стиле ng не работает для Firebase Storage.

0

Я пытаюсь загрузить фоновое изображение в div. Я попробовал несколько опций, но моя страница пуста, ничего не отображается. Ниже приведены различные стили, которые я пробовал:

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>

<div ng-style="{'background-image': 'url('{{profilepic}}')'}"></div>

Где, в моем контроллере:

storageRef.child('images/pic.png').getDownloadURL().then(function(url) {
   // Get the download URL for 'images/stars.jpg'
   // This can be inserted into an <img> tag
   // This can also be downloaded directly
   $scope.profilepic = url;
}).catch(function(error) {
     // Handle any errors
});

В журнале консоли отсутствует ошибка. Я получаю фактический url.

Это работает, т.е. Изображение отображается правильно, но это не то, что я пытаюсь выполнить:

<div style="{'background-image': 'url('img/pic.png')'}"></div>

Я прошел аналогичные должности и попробовал их решения, но никто из них, похоже, не работает.

Теги:
background-image
ng-style

3 ответа

1
Лучший ответ

Я наконец понял, в чем проблема. Я должен поделиться этим, это может помочь другим. Все было в порядке с моим HTML ниже:

<ion-content>
    <div ng-style="{'background-image': 'url('+pic+')'}">
       <div class="content">
          <div class="avatar" ng-style="{'background-image': 'url('+profilepic+')'}"></div>
          <h3>{{fname.txt}} {{lname.txt}}</h3>
       </div>
    </div>
</ion-content>

Проблема была в моем контроллере. Это то, что у меня было:

auth.onAuthStateChanged(function(user) {
    var storage = firebase.storage();
    var storageRef = storage.ref();
    var storageRefPic = '';
    storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) {
        storageRefDefltPic = url;
    }).catch(function(error) {
        // Handle any errors
    });
    $scope.pic = storageRefDefltPic;

    var storageRefProfilePic = '';
   storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) {
        storageRefProfilePic = url;
    }).catch(function(error) {
        // Handle any errors
    });
    $scope.profilepic = storageRefProfilePic;
    fbRef.child(userID).once('value').then(function(snapshot) {
        $scope.fname.txt = snapshot.val().firstName;
        $scope.lname.txt = snapshot.val().lastName;
        $scope.pic = storageRefProfilePic;
    });

});

Мои переменные и код были полностью перепутаны. В консоли я понял, что ссылка на firebase сначала вызывалась, до ссылки на хранилище, в результате чего мои переменные области видимости были пустыми, поэтому изображения профиля были пустыми. Поэтому я удалил ненужные переменные и переместил ссылки на хранилище в обратном вызове до моментального снимка данных, как показано ниже:

auth.onAuthStateChanged(function(user) {
    fbRef.child(userID).once('value').then(function(snapshot) {
        var storage = firebase.storage();
        var storageRef = storage.ref();
        var storageRefPic = '';
        storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) {
            $scope.pic = url;
        }).catch(function(error) {
            // Handle any errors
        });
        storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) {
            $scope.profilepic = url;
        }).catch(function(error) {
            // Handle any errors
        });
            $scope.fname.txt = snapshot.val().firstName;
            $scope.lname.txt = snapshot.val().lastName;
    });
});

Теперь все работает нормально! Я благодарю всех вас за помощь! Я действительно ценю вас!

0

Должен быть:

<div ng-style="{'background-image': 'url({{profilepic}})'}"></div>

В вашем случае вы должны использовать это:

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>

Обновлен JSFiddle

  • 0
    Это не работает для меня. Вот скрипка
  • 0
    Я обновил ответ
Показать ещё 1 комментарий
0

Если я понял вас правильно - проблема решена довольно легко. Вам нужно установить размер для div или поместить некоторый контент внутрь, поскольку background-image не считается содержимым.

Это приводит к пустой div с высотой = 0;

здесь работает скрипка

  • 0
    Я добавил высоту и ширину, как вы предложили, но это не работает.
  • 0
    Ты проверил мою скрипку?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню