Loading contact photos iOS in an image tag


#1

I am using the Contacts plugin for ionic I load all the contacts name and email; however, I cannot load any photos

<div *ngFor="let cont of allContacts">
    <h3>Name: {{cont['name']['formatted']}}</h3>
    {{cont.photos[0].value}}
    <img src="{{cont.photos[0].value}}" height="150px" width="150px">
  </div>

This the path

/var/mobile/Containers/Data/Application/23C4E7F3-9509-45CB-9DD2-493CF891F6C3/tmp/contact_photo_354

I tried to add a .jpg at the end of the path but it does not work either

So how you load a contact photo in ionic wit the img tag?

Thanks


#2

Can you output the whole photos[0] please?

On the Cordova plugin Github page is this remark:

photos: Returns a File URL to the image, which is stored in the application’s temporary directory. Contents of the temporary directory are removed when the application exits.

https://github.com/apache/cordova-plugin-contacts#ios-quirks-1
Does this help?

Did you remote debug the image tag on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Then look at the console and network tab for loading errors. You can also dynamically change the src of the img tag to try different URIs…


#3

Thanks for the reply I had to use DOMSanitizer