Images not shown on Apple (iOs / Mac) devices

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

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

And my slice config :

> [
>   {
>     "variation": "default",
>     "version": "sktwi1xtmkfgx8626",
>     "items": [
>       {
>         "logo": {
>           "dimensions": {
>             "width": 200,
>             "height": 500
>           },
>           "alt": null,
>           "copyright": null,
>           "url": ""
>         }
>       }
>     ],

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 :

Do you have an idea ?

1 Like

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

Hey Ricou, the images are appearing correctly for me.

Can you paste a screenshot of the issue?


Did you try with a Apple Device ?

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

Thanks a lot jake !