Caching images offline

[rwittels]

Hi. I just need confirmation that I am doing this correctly please. I have 4 images in my app which were uploaded to the Media section and are listed under the heading Images. I would like to cache my images OnStart. I have used this code:

ClearCollect(appImages, {Images: ["Image1.png", "Image2.png", "Image3.png", "Image4.png"] })

Am I doing this correctly?

Do I need to do anything on each image within the app screens?

[eka24 · Accepted solution]

Consider this:

ClearCollect(

    appImages,

    {ID:1, Image: Image2},

    {ID:2, Image: Image2},

    {ID:3, Image: Image3},

    {ID:4, Image: Image4},

    {ID:5, Image: Image5})

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[rwittels]

Thank you for the reply. I am trying to use appImages.ID=1 in the image's Image property on the screen and it doesn't work. What is the correct syntax to access the image?

[eka24]

Yes ignore the extension.

In the image of the Gallery:

LookUp(appImages,ID=ThisItem.ID,Image)

Am assuming you have a common column like ID between your datasource for the Gallery and the Image collection.

Your can change the Name ID to and identical column 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[rwittels]

LookUp(appImages,ID=1,Image) works. If images were added as media, does adding them to a collection like this improve performance?

[eka24]

LookUp to the image is ok because the images are already in the App through a collection.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[LionSense]

Hi Rwittels,

I have similar use case as you. My images are 5MB big and i have uploaded them in Power apps Media.

On the OnStart of the app i have created collection like this :

ClearCollect(ImageCache,

{ID : 1, Image : SS1},

{ID : 2, Image : SS2});

Here SS1,SS2 is the name of my image in media. I have ignored the PNG extension.

Now in the Image Property of an Image control i have used : 

LookUp(ImageCache,ID=1,Image)

For me it shows blank for both images.

Please tell me where am i doing wrong.

Thanks & Regards

[rwittels]

Hi LionSense. Firstly, your code is correct. You probably haven't selected Run OnStart next to App at the top of Tree View. When you add code to OnStart and want to test it you have to select the 3 dots next to App and then Run OnStart. This will make your OnStart code available to the app in the Studio.

Please explain what you want to cache images OnStart for and do they have to be so big? Can't you optimise them?

I have learned a lot since I posted this in 2021. Back then I wanted to cache images that I would be using more than once in my app e.g. a company logo or a background graphic for a header or footer.

I now create components with the image I want to reuse (right of Screens in the Tree View). I then use the Insert menu and select my component under Custom to reuse it. This is the better way to do it.

It's the same as accessing a cached image as components load on start and are able to access app scope e.g. global variables for colour etc.

[LionSense]

Thanks for the reply 🙂

Yes i have done the Run onstart thing and tested it. The image never loaded in my power app studio neither in the publish mode.

I cannot optimize the image as my company needs super HD background images. Still i have lessened the image size to 2MB. and the image loads in 3 seconds now which is still slow.

For me i have total of 6 screens which has huge BG images, loading them onstart will definitely lessen the load time but i dont know why the lookup is not working for me. If it worked for you it should work for me right?

As for the second approach, does creating images in a custom component and using that component actually loads the image onstart?

Sounds interesting, i will try and update you. 

can you please elaborate the second method you are talking about. I want to check if i am thinking the correct way.

Thanks and Regards

[rwittels]

Hi. Sorry for the delay in getting back to you. Did you resolve your issue?
I have tested with images over 5Mb and they display when used as backgrounds with the code suggested.

Try this. It also works:

LookUp(ImageCache,ID=1).Image

I am just curious. Is your image resolution higher than the largest screen resolution the app will be viewed on e.g. your images are 4k but people are only viewing them on 1080p screens?