Я хочу установить фоновое изображение для моего ионного содержимого. Я хотел бы добавить его с помощью background-image: url('../assets/imgs/my_image.jpg')
в CSS, но я хочу, чтобы изображение загружалось от пользователя с помощью камеры cordova-plugin. Как вы знаете, с помощью этого плагина я могу сделать снимок камерой или загрузить его из галереи, я даже могу отобразить его в HTML, но я понятия не имею, как установить фон с этим изображением. я пытался
.content
{
background-image: {{ myItem.photo }};
}
Но очевидно, что это не работает.
Кто-нибудь может решить эту проблему? заранее спасибо
Вот как я загружаю изображение:
HTML:
<button ion-button (click)="presentActionSheet()">
Choose photo
</button>
TS:
public presentActionSheet()
{
let actionSheet = this.actionSheetCtrl.create({
buttons: [
{
text: 'Load from gallery',
handler: () =>
{
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Take picture',
handler: () =>
{
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType)
{
// Create options for the Camera Dialog
var options = {
quality: 60,
sourceType: sourceType,
targetHeight: 500,
targetWidth: 500,
mediaType: this.camera.MediaType.PICTURE,
encodingType: this.camera.EncodingType.JPEG,
saveToPhotoAlbum: false,
allowEdit: true
};
// Get the data of an image
this.camera.getPicture(options).then((imagePath) =>
{
// Special handling for Android library
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY)
{
this.filePath.resolveNativePath(imagePath).then(filePath =>
{
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
});
}
else
{
let currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
let correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
}
}, (err) =>
{
this.presentToast('Error');
});
}
// Create a new name for the image
private createFileName()
{
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName)
{
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success =>
{
this.myItem.photo = newFileName;
}, error =>
{
this.presentToast('Error');
});
}
imagePath
после загрузки 19.06.2018this.camera.getPicture(options).then((imagePath) =>...
, чтобы увидетьimagePath
, и это выглядит так: 19.06.2018<div class="content" [style.background]="'url('+myItem.photo+')'"></div>
19.06.2018<div class="content" [style.background]="'url('+pathForImage(myItem.photo)+')'"></div>
, гдеpathForImage
определяется только этот возврат:return normalizeURL(cordova.file.dataDirectory + img);
. Единственная проблема заключается в том, что свойство CSS, такое какbackground-size: contain
, не соблюдается... похоже, его не читают 19.06.2018