0

I've used the following code in an embedded code field on Google Sites to display images on my website, it's all going well on my Windows, Linux and Android devices, but they don't show up on the iPhone (whether using Chrome or Safari)!

some context/constraints: I'm pulling my images from my Google Drive. They are ~80kb JPEGs. I'm using a HTML form as I have other elements (buttons, fields) which I've removed from the code extract below to focus on the issue. I need to keep this form.

Have you encountered this issue before?

<form name="submit-to-google-sheet">
   <img id="img1" width=163 height=227>
</form>

<script>
    const img1 = document.getElementById('img1');
    img1.src = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
</script>

PS: I've explore the Base64 format which does allow to display the images on iOS-operated devices. It works if I just set the image source to a Base64 string. But I can't call a Base64 file from Drive as conveniently as a JPEG. I'm manipulating 250+ images so I can't either have the base64 strings in the middle of the code, it'd be too large to work with. I've tried to encode the images with base64_encode functions following this example but didn't manage to display anything. I've drilled so much that I'm actually wondering if it's the right way to go at all!

FanF
  • 23
  • 5
  • Try width='163' height='227'. HTML attribute values should be Strings. – StackSlave Jan 05 '21 at 00:51
  • thanks for your comment. I just tried, it does work with apostrophes around the parameter values, but still I get an empty box instead of the image on iOS devices... – FanF Jan 05 '21 at 13:17
  • You may see that syntax in examples on Stack Overflow, but it shouldn't be used in production. You need to get the Element. You could do `const img1 = document.getElementById('img1'); img1.src = 'sourceHere.ext';`, if you want to set it with JavaScript. – StackSlave Jan 06 '21 at 22:59
  • thanks for the tip! I've added the constant variable declarations. now, I still have the problem on iOS devices... – FanF Jan 07 '21 at 15:22
  • I just use `const` because you usually don't want to change the variable if it's assigned an Object or non-primitive. You just weren't getting the Element correctly. Are you sure the images aren't improperly stored in the cache on your iOS Browser? Clear the cache. – StackSlave Jan 07 '21 at 23:02
  • Cleared the cache... Still no images! – FanF Jan 08 '21 at 00:22

1 Answers1

0

We just found the fix for iOS: when third-party cookies and cross-site tracking are blocked, the images don't load. The settings to toggle are explained here.

Base64 wasn't the solution, since the issue was coming from pulling images from my Google Drive, i.e. a different domain from my website.

FanF
  • 23
  • 5