Обмен данными с фондом не отображает изображение

#image #zurb-foundation #webp

Вопрос:

Итак, у меня проблема с изображениями webp на моем сайте. Как вы можете видеть ниже, он не отображает изображение, а вместо этого отображает код изображения.

введите описание изображения здесь

Когда я использую jpg-файл, он работает как шарм. Мой код приведен ниже. Изображение должно отображаться как «обложка» в div. Фреймворк, который я использую, — это Foundation 5. Я знаю, что он устарел, но я работаю над новым сайтом и пока не хочу обновляться, но подумал, что предоставление изображений webp вместо jpg может быть быстрым решением для ограничения полосы пропускания в Cloudinary, где размещаются изображения.

 <div class="small-6 medium-4 large-4 columns" style="background-size: cover;" data-interchange="[/-/media/Global/NoImage.jpg, (default)], [https://res.cloudinary.com/Company/image/upload/w_195,h_195,c_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (small)], [https://res.cloudinary.com/woningnet/image/upload/w_300,h_195,c_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (medium)], [https://res.cloudinary.com/woningnet/image/upload/if_ar_lt_1:1/h_600/if_else,w_800/if_end/c_fill/f_auto/v1625496788/WRB/T/3554/t2scdia2gtw8vswjh575.webp, (large)]" data-uuid="interchange-qqqAg0">
 

Я искал в Интернете, но до сих пор не нашел решения, большинство вещей я нашел там, где объяснения, почему вы должны работать в Интернете. Есть какие-нибудь идеи?