Images not shown on Apple (iOs / Mac) devices

Developing with Prismic
,
1

Hello,
I have a slice that displays a loop of images such as:

<div class="d-flex flex-wrap justify-center">
    <div
      v-for="(item, i) in slice.items"
      :key="`slice-item-${i}`"
      class="mx-2 mb-5">
      <img :src="item.logo.url" style="width: 150px" />
    </div>
  </div>

And my slice config :

> [
>   {
>     "variation": "default",
>     "version": "sktwi1xtmkfgx8626",
>     "items": [
>       {
>         "logo": {
>           "dimensions": {
>             "width": 200,
>             "height": 500
>           },
>           "alt": null,
>           "copyright": null,
>           "url": "https://images.unsplash.com/photo-1471897488648-5eae4ac6686b"
>         }
>       }
>     ],

My loop images display correctly on Chrome, FX, Android... but don't display on Apple devices (iOS, Mac...).

You can see the images (logos) in the second block of the page : https://dev.level.adngroup.com/

Do you have an idea ?
Thanks

1 Like
2

personne n'a eu le même soucis avec les images Prismic ?

3

Hey Ricou, the images are appearing correctly for me.

Can you paste a screenshot of the issue?

Thanks

4

Hi,
Did you try with a Apple Device ?

unnamed
unnamed3094×1550 54.3 KB

5

I'ive tried in an older version of Safari and can now see the issue.

You're using .avif file formats which aren't supported in Safari 15 and below.

You can see complete list of supported browsers here: AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

I'd recommend converting them to webP/jpg/png for wider support.

1 Like
6

Thanks a lot jake !

2 Likes