Image Component not showing image on phone, but works in Dev

Mobile
1

I have an Image component in my mobile app that displays an image from a Retool Storage uri just fine when I am dev mode, but when I try it on an actual phone, the image does not load - I just get a pulsating background.

I have a Samsung S21.

Not sure how to go about debugging this.

2

Ok so it seems this is the same issue as here:

I was using the URI. So I need to do it the hard way, which I am already using in the desktop version of the app:

After I get the photo, I make a thumbnail and get it's base64 and store that in the database. I use that for any displays thumbnails in the app so I don't have to go back to the Storage API on every item. When it is clicked, I then get the file contents from the Retool Storage API and show that Base64 an image component. If the file is not an image, I use the Base64 of stock icon of the file type (like PDF) which I have stored in the app.

I am open to better workflows!

Since I now know that the URI is a reference to the local BLOB, I am going to see if I can use that to get the thumbnail instead of calling the Retool Storage API. There may also be an optimization where I can can store the fetched Base64 locally so I do not have to re-fetch as the user flips back and forth on the photos.

For others, here is my thumbnail code:

window.createThumbnail = async function(base64Image, maxHeight = 100) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = "data:image/jpeg;base64," + base64Image;

    img.onload = () => {
      const aspectRatio = img.width / img.height;
      let newWidth = img.width;
      let newHeight = img.height;

      // Check if the height needs to be limited
      if (img.height > maxHeight) {
        newHeight = maxHeight;
        newWidth = maxHeight * aspectRatio;
      }

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      // Set the canvas size to the new dimensions
      canvas.width = newWidth;
      canvas.height = newHeight;

      // Draw the image onto the canvas with the new dimensions
      ctx.drawImage(img, 0, 0, newWidth, newHeight);

      // Convert the canvas content to a base64 thumbnail
      const thumbnailBase64 = canvas.toDataURL("image/jpeg");

      resolve(thumbnailBase64);
    };

    img.onerror = (error) => {
      reject(error);
    };
  });
};