Forum | Appery.io

I still have an issue with photos not loading into my app. In my last post, I thought I was posting a rather small base64 list, that was not the case, sorry for that. I'm still having the same issue though, i had changed what you'd suggested moving the photo variable to under the $ sign. After doing that it still didn't load, I've shared the app with you it's name is PICKS. I would appreciate it if you would take a look and see if there is anything you can see that I'm doing wrong. I believe that there are only four photos total in the database, The page is set to Bryants page, if you click the Saturday button, the view customer information, that will bring up a test entry that has a photo in it.
Thanks

Hello,

Could you clarify the steps for testing? I've tested your app and I can see the photos.

What photo is it that you're seeing.

If that is the picture you're seeing, That is the one that I set to use instead of the blue flower that comes as a default when you select a image component. I am understanding that is used as a place holder. I can get that one to show up too, however that is not the image from the database, that is one that I've uploaded. There are some in my app that are simply pictures of my keyboard, for testing purposes that were posted to the database via the camera button on the phone. Those have posted to the database as what I think is a base64 image. Those are the pictures I'm trying to get to show up. As far as testing is concerned I have used the apprey tester app, and the app preview, or test button in the program. Neither has worked for showing those images.

Hello! Sorry, still no news. Working on it.

Hi Jeff,

You can use the following code:preAppery("mobileimage_2").css("background", "url(data:image/png;base64,XXXXXX)");
Appery("mobileimage_2").attr("src","");/preWhere XXXXXX is a base64 string with the image,
mobileimage_2 is an image component name.

I found this post as I couldn't get Base64 Images to load straight into assets with a Rest Call.

The method mentioned works:

Appery("mobileimage_2").css("background", "url(data:image/png;base64,XXXXXX)");
Appery("mobileimage_2").attr("src","");

However, the sizing of the images are incorrect as well as the images display the "file missing icon" still?

Hello Dulan,

We have just tested this code - it works well. The size of picture is determines of size of image component. We use this site for converting image to base64

But when the image is larger then the component it does not shrink/stretch down to fit the component. I only see the corner of my image.

Ok I fixed the image size problem like this:

$(element).css("background", "url(data:image/jpeg;base64," + value + ")");
$(element).css("background-repeat", "no-repeat");
$(element).css("background-size", "contain");
$(element).attr("src","");

But there is still a "image not found" icon in the middle of my picture? I have attached a photo.

Hi Dylan,

Probably string "data:image/jpeg;base64" is already stored in variable 'value'. Could you please post a screenshot of layout with this image component?