Итак, у меня есть эта проблема, когда я получаю формат изображения webp, base64 из API. Изображение не отображается на устройствах ios, но появляется в Android. Итак, есть ли решение для тех, кто использует expo и хочет отображать изображения webp на ios? И я могу взять другое решение, если оно работает на php, так как это то, что я использую в качестве бэкэнда.
пример возвращаемой строки изображения
Обычно изображения webp несовместимы с Safari. Вы можете проверить совместимость для webp здесь.
Что вам нужно сделать, так это, возможно, использовать службу, которая преобразует изображение в рабочий формат, будь то jpeg или png, и использовать тег <picture>. Это просто пример использования тега.
<picture>
<source srcset="images/[email protected]" type="image/webp">
<source srcset="images/[email protected]" type="image/png">
<img src="images/[email protected]" alt="Logo">
</picture>
ОБНОВЛЕНИЕ
Приведенный выше пример был просто для того, чтобы показать вам, как использовать тег picture с различными типами изображений.
Что касается изображений base64, вы можете сделать что-то вроде этого:
<picture>
<source srcset="data:image/webp;base64,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" type="image/webp">
<source srcset="data:image/jpeg;base64,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" type="image/jpeg">
<img src="data:image/jpeg;base64,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">
</picture>Другим вариантом может быть использование Modernizr для определения того, может ли браузер клиента использовать webp. Вы можете проверить и создать Modernizr специально для обнаружения webp. Проверьте это здесь.
Что вам нужно сделать, если у вас есть контроль над тем, как изображения создаются/загружаются, так это иметь версию jpg/png и webp и просто использовать соответствующие версии по мере необходимости. Вам нужно иметь оба, потому что, как я уже говорил, webp по-прежнему совместим не со всеми браузерами.
Если вы запустите фрагмент, вы увидите, что если вы попытаетесь загрузить изображение, оно будет использовать версию webp. Если вы откроете его из Safari, он загрузит версию jpg.
ОБНОВЛЕНИЕ 2. Преобразование изображений
Что касается преобразования изображения, вы можете либо создать функцию генерации изображения, которая получает изображение webp в качестве параметра и возвращает изображение jpg.
Поскольку вы получаете изображение в формате base64, вы можете использовать эту тему, чтобы сохранить изображение на своем сервере, но в .webp в вашем случае. После этого вы можете использовать функцию imagecreatefromwebp() для создания нового изображения. . Проверьте пример в конце этой страницы. Он преобразует изображение webp в jpeg.
Из того, что я вижу, вы можете сделать что-то вроде:
