Here is a simple asynchronous image loader extension to load image asynchronously in a image component from image path.
This is a simple and light weight extension since it does not uses any external library to load image. Created for personal use but sharing in case this may help someone.
Sample Blocks:
V2. Added property to set image circular with border width and border color.
Download:
V4 com.thekstudio.AsyncImageV4.aix (13.2 KB)
Spelling in aix filename (Aync)
Also, for others may help to indicate the benefits of using this extension, over just loading an image...
Oops typo...corrected. Thanks!
Updated
You can load image from various sources like assets, local file from ASD or online.
Now you can load image in an arrangement like vertical, horizontal or scroll arrangement.
Added event onError in case failed to load image.
Is there some information on this ?
Yes, I created this extension for Kodular, as the Kodular inbuilt async image loader block from image utilities component doesn't work due to permission error in higher Android versions.
This extension overcomes that problem as this does not uses any permission.
Specially using with Dynamic component extension when loading large list data that includes images, the app lags until all the images getting loaded synchronously, by using async image loader this problem can be fixed.
From that I read that the benefit comes when loading (large) lists of images in one go, or a single large image?
As I said, large list data that includes images either small size or large size images, it takes time for loading as it loads synchronously until all images getting loaded, and sometimes the app crashes due to this.
Updated:
I'm having a hard time understanding the difference between a 'for component' and 'component'. Thank you in advance.
You're using the "Any Component" version of this block (notice how it says AsyncImage instead of AsyncImage1 or similar). The "for component" parameter here accepts a component and changes a property for that component. If you look at the component-specific blocks, they do not have the "for component" socket:
I see what you mean. Odd that when I click on the AsyncImage1 component, no objects display. I tried reloading it but still the same long vertical gray area.
You can set the for component and component to same component in which you want to load the image.
I did that but am getting an error: The operation LoadImageAsync cannot accept the arguments: , ["com.google.appinventor.components.runtime.Image@541de13"]
Do not use load async image block from any component.
Use normal load async image block from the extension like below.
If extension is not showing the blocks then there might be issue with your project, onxe delete the extension and import again. Or try in a new project.
I re-installed it twice. Same results. That large vertical gray strip is all I see. I tried Firefox, MS Edge and Chrome browsers. All the same ressults. Maybe the component I downloaded is corrupted inside. I did download the V4 version.
Delete the old file and re download the extension again from main post.
May be try in a new project.
That finally did it -- it worked! Thank you very much.
