Get file from storage - display photo

Context:

My app is a mobile app that needs to be able to function completely offline. I’m working to develop an app for documentation that allows a user to fill out a form that also contains 3 photos that need to remain visible to the user. I’m using the “image” component linked to a file path data variable that is set as a result of the “take photo” function to display these photos. After submitting the form, the same page then creates a new local record that is blank and changes a “page number” that is a page variable. If the user goes back a “page” (same actual page of the app just different page number variable so that a different local record is displayed) the previous record is displayed due to all of the fields being linked to data variables.

Primary Issue:

I’m using the “take photo” function for this documentation app. This creates a local system file path. I’m currently saving this photo in the data variables each as an object with the 6 fields for a photo, and as a base 64 encoded text (for upload later). Using the file path saved in local storage as the file path for the photo being displayed works perfectly until I have approximately 10 photos, then the photos will not display consistently. I need this app to be able to display a minimum of 300 photos consistently before deployment.

Secondary Issue:

I’ve also tried linking the “image” component to the base 64 encoded text from my data variables. Although the “image” component clearly states that the “source” can be a base64 string, I have not been able to properly structure it to do so.

Since that has not worked, I’m attempting to use functions “set item to storage” and “get item from storage” as a way to save these images more reliable manner. The issue that I’m having with doing so is that I cannot manage to link the “get item from storage” function to the “image” component so that the retrieved image from storage can be displayed.

Please Help.

1 Like