Forum | Appery.io

Now the images load in without that image missing icon, but. They are stretching, I am going to use max-height to try prevent this as the width is 100% due to wanting to use the size of the screen. Is this the correct method?

And my final issue is the image rotate works on a big screen, can you point me in the right direction to prevent this overlay effect.

Please see this screenshot to see what my problem is.

Hello Dylan,

1 Lay HTML component and on your grid and set its type "div"
2 Set dimension for it auto and 250 px
3 Remove your Image component from page into the html component
4 Set dimension for image 100% and 100%
5Your javascript code for mapping image:

code if (value) {
var bin = atob(value);
var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
if (exif.Orientation === 6) {
$(element).css("-webkit-transform", "rotate(90deg)");
$(element).css("-moz-transform", "rotate(90deg)");
$(element).css("-ms-transform", "rotate(90deg)");
$(element).css("-o-transform", "rotate(90deg)");
$(element).css("transform", "rotate(90deg)");
$(element).css("max-height", "200px");
}else{
$(element).css("max-width", "200px");
}
return "data:image;base64," + value;
} else {
$(element).hide();
$(element).parent().hide();
return value;
} /code

You are awesome!!! Thank you for your patience with me.

I did have a slight issue, With the image set to 100% height, I was getting a scrollbar in the HTML div and smaller images were stretching. I fixed it with setting the image height to auto rather.

Well done to your team for great support on Appery!