Я пытаюсь загрузить фоновое изображение в 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>
Я прошел аналогичные должности и попробовал их решения, но никто из них, похоже, не работает.
Я наконец понял, в чем проблема. Я должен поделиться этим, это может помочь другим. Все было в порядке с моим 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;
});
});
Теперь все работает нормально! Я благодарю всех вас за помощь! Я действительно ценю вас!
Должен быть:
<div ng-style="{'background-image': 'url({{profilepic}})'}"></div>
В вашем случае вы должны использовать это:
<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>
Если я понял вас правильно - проблема решена довольно легко. Вам нужно установить размер для div
или поместить некоторый контент внутрь, поскольку background-image
не считается содержимым.
Это приводит к пустой div
с высотой = 0;
здесь работает скрипка