In my project, I encountered an issue where I can fetch and display the contact photo using simple HTML and JavaScript. However, when I attempt to do the same using AngularJS model, I encounter an error. Below is the code snippet that I am struggling with:
Below is the list where I am attempting to display the contact:
<ul class="list">
<li class="item item-thumbnail-left" ng-repeat="contact in contactList">
<img ng-src="{{contact.mphoto}}"/> <!--When I directly use this path (i.e., "content://com.android.contacts/contacts/30/photo"), the image displays correctly. But when fetched from the controller, I get the error: "unable to read contacts from asset folder"-->
<h2>{{contact.name}}</h2>
<p >{{contact.number}}</p>
</li>
</ul>
The following is my controller setup for setting 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})
}
}
}