Изображения во встроенных модулях кода Сайтов Google не отображаются на устройствах iOS

Я использовал следующий код в поле встроенного кода на Сайтах Google для отображения изображений на моем веб-сайте, все идет хорошо на моих устройствах с Windows, Linux и Android, но они не отображаются на iPhone (независимо от того, используется ли Chrome или Сафари)!

некоторые контекст/ограничения: я извлекаю свои изображения с моего Google Диска. Это ~ 80 КБ JPEG. Я использую HTML-форму, поскольку у меня есть другие элементы (кнопки, поля), которые я удалил из фрагмента кода ниже, чтобы сосредоточиться на проблеме. Мне нужно сохранить эту форму.

Сталкивались ли вы с этой проблемой раньше?

<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: я изучил формат Base64, который позволяет отображать изображения на устройствах под управлением iOS. Это работает, если я просто устанавливаю источник изображения в строку Base64. Но я не могу вызывать файл Base64 с Диска так же удобно, как JPEG. Я манипулирую более чем 250 изображениями, поэтому я не могу иметь строки base64 в середине кода, это было бы слишком большим для работы. Я пытался кодировать изображения с помощью функций base64_encode, следуя этому примеру но не удалось ничего отобразить. Я так много тренировался, что мне даже интересно, правильный ли это путь вообще!


person FanF    schedule 05.01.2021    source источник
comment
Попробуйте width='163' height='227'. Значения атрибутов HTML должны быть строками.   -  person StackSlave    schedule 05.01.2021
comment
Спасибо за ваш комментарий. Я только что попробовал, он работает с апострофами вокруг значений параметров, но все же я получаю пустое поле вместо изображения на устройствах iOS...   -  person FanF    schedule 05.01.2021
comment
Вы можете видеть этот синтаксис в примерах на Stack Overflow, но его не следует использовать в рабочей среде. Вам нужно получить Элемент. Вы можете сделать const img1 = document.getElementById('img1'); img1.src = 'sourceHere.ext';, если хотите установить его с помощью JavaScript.   -  person StackSlave    schedule 07.01.2021
comment
Спасибо за чаевые! Я добавил объявления постоянных переменных. теперь у меня все еще есть проблема на устройствах iOS ...   -  person FanF    schedule 07.01.2021
comment
Я просто использую const, потому что обычно вы не хотите изменять переменную, если она назначена объекту или не является примитивной. Вы просто не правильно поняли элемент. Вы уверены, что изображения не хранятся в кеше браузера iOS неправильно? Очистите кеш.   -  person StackSlave    schedule 08.01.2021
comment
Очистил кеш... Изображений по-прежнему нет!   -  person FanF    schedule 08.01.2021


Ответы (1)


Мы только что нашли исправление для iOS: когда сторонние файлы cookie и межсайтовое отслеживание заблокированы, изображения не загружаются. Параметры для переключения объясняются здесь.

Base64 не был решением, так как проблема возникла из-за извлечения изображений с моего Google Диска, то есть другого домена с моего сайта.

person FanF    schedule 23.01.2021