Link to cross domain images from SharePoint online app?

Question

I've created a simple employee photo directory app for SharePoint Online (O365), packaged and deployed the solution as a SharePoint app. The lists and libraries where I'm getting my data from exist under my primary domain: https://company.sharepoint.com

My app is deployed under the a sub domain and site similar to the following: https://company-3ijdksk13.sharepoint.com/myapp/

I'm using JSOM and the cross-domain libraries to pull various data in from various lists and this works perfectly. Now I want to embed some images in my app that exist in a document library on the primary site: https://company.sharepoint.com/SomeImages/0001.png

If I directly link to the images in my markup from my app, most of the time the images load, every once in a while, they do not. When they fail, I've found that to get them to load, the user has to manually navigate to the primary domain which re-authenticates them or something and they will load fine when they go back into my app. Since this app will be bookmarked on users desktops, they will not always visit the primary site first.

Question: what is the best way to display images in my SharePoint App that exist on my primary site? Surely there is an easier way that manually retrieving the image data via REST or JSOM and dealing with that mess?

Answer 1

So, there isn't a simple method for doing this in my case. The cause of the problem is obviously that the image domain is in a separate IE Security zone that doesn't share the auth cookie with the app domain.

I attempted to write a service to write a base54 encoded image back to the browser but I ran into issues with the format of my images. Example here.

Not so great work around for the moment was to create a landing page on the primary domain that links to the app in the app domain. This is where users are directed by default now which forces the auth cookie for the image location to be set.