Невозможно отобразить контактную фотографию в телефонной пробке через angularjs
Я могу получить и отобразить фотографию контакта из простого html и javascript, но когда я использую модель angularjs для отображения фотографии контакта, я получаю ошибку. Ниже приведен мой исходный код:
Список, где я пытаюсь отобразить контакт:
<ul class="list">
<li class="item item-thumbnail-left" ng-repeat="contact in contactList">
<img ng-src="{{contact.mphoto}}"/> <!--When I put this path directly ( ie "content://com.android.contacts/contacts/30/photo"), I am able to display the image, but when I fetch it from the controller, I am getting error: "unable to read contacts from asset folder" -->
<h2>{{contact.name}}</h2>
<p >{{contact.number}}</p>
</li>
</ul>
Вот мой контроллер для настройки ContactList:
ContactService.find("").then(function(contacts) {
for (var i = 0; i < contacts.length; i++)
{
if (contacts[i].phoneNumbers !== null)
{
for (var j = 0; j < contacts[i].phoneNumbers.length; j++)
{
var img = contacts[i].photos != null ? contacts[i].photos[0].value : "img/default.png";
$scope.contactList.push({name: contacts[i].name.formatted, number: contacts[i].phoneNumbers[j].value, mphoto: img})
}
}
}
2 ответа
Наконец, после такой большой борьбы, я смогу найти проблему,
Пожалуйста, вставьте следующие строки в ваш файл App.js, и проблема будет решена, и причина не показывать фотографию в том, что Angularjs добавляет небезопасно: перед каждым URL, если ему не доверяют.
config(['$compileProvider', function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
}]);
У меня была эта проблема в Angular 2 с Ionic 2, но я не знал, что это была проблема, и я не знал, как попробовать ответ на акцептор в Angular 2. Для полноты, вот как вы бы это исправили используя Ionic 2:
впрыскивать sanitizer: DomSanitizer
в вашем контроллере / сервисе.
затем позвоните: sanitizer.bypassSecurityTrustUrl(photoURL)
Вот пример:
export class HomePage {
url;
constructor(public navCtrl: NavController, platform: Platform, sanitizer: DomSanitizer) {
platform.ready().then(() => {
Contacts
.pickContact()
.then((contact) => {
alert(JSON.stringify(contact));
if (contact.photos) {
var photoURL = contact.photos[0].value;
this.url = sanitizer.bypassSecurityTrustUrl(photoURL);
}
});
})
}
}