NUXT3 NuxtImg : Image rotate 90° when I use NuxtImg

Question

When I use NuxtImg, my images rotate at 90°. This problem appear with vertical mobile images, when I read it on supabase and display it. Before upload and on supabase, images are ok (portrait).

When I use img instead everthing is ok, images change and become portrait style...

My nuxt config :

       image: {
  inject: true,
  quality: 80,
   format: ['webp'],
      screens: {
      'xs': 120,
      'sm': 240,
      'md': 290,
      'lg': 384,
      'xl': 480,
      'xxl': 480,
      '2xl': 480
    }, 

    domains: ['images.unsplash.com', 'draxies.com', 'qzlburhygrqslzasuiak.supabase.co']

},  

My NuxtImg code :

      <div class="relative pb-64 z-0">
        <NuxtImg class="absolute w-full h-full rounded-lg object-cover border-b shadow-md"
          :src="offer.offer_image_url" :alt="offer.offer_title" placeholder />
      </div>

Answer 1

As Robert mentioned, this has to do with the EXIF metadata. The EXIF metadata tracks certain properties about images such as width, height, geolocation, orientation, etc.

The reason your image is displayed properly when you use a normal <img> tag and/or you view it on Supabase is because your original images are being served/used, and these contain the original orientation EXIF metadata; thus, your browser uses this EXIF metadata to orient the image correctly.

However, by default NuxtImage removes/replaces all of this original EXIF data when it pre-renders/optimizes them; thus, your browser no longer compensates by auto-rotating it properly, so you see the image in an incorrect orientation.

If you are using the default image provider (which is IPX), you can force NuxtImage to preserve the original EXIF orientation by specifying the following provider metadata on your <NuxtImg> and <NuxtPicture> elements:

<NuxtImg :modifiers="{ rotate: null }" />
<NuxtPicture :modifiers="{ rotate: null }" />

If the rotate modifier is present, but it does not contain a value, then NuxtImage will fallback to the orientation that is specified in the EXIF metadata (FYI: if you're wondering why this links to Sharp, it's because IPX uses Sharp under the hood).

To be clear, this does not preserve the original EXIF metadata; instead, NuxtImage actually generates an image that matches the original EXIF orientation by rotating the pixels that are in the image.

Additional Reading

• https://github.com/nuxt/image/issues/70
• https://github.com/unjs/ipx/issues/81
• https://github.com/unjs/ipx/#modifiers