使用Nuxt3的NuxtImg组件时移动端竖图旋转90°问题求助

移动端竖拍的图片会携带Exif方向标记，原生<img>标签由浏览器自动解析该标记并完成正确旋转，但NuxtImg在转换图片格式（如你配置的webp）时，底层图片处理服务默认忽略了Exif方向信息，导致图片显示旋转90度。

方案1：临时验证格式转换影响 #

先注释掉format: ['webp']配置，确认是否是格式转换导致的问题：

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']
},  

若图片显示恢复正常，说明webp转换过程中丢失了Exif旋转处理逻辑。

方案2：配置Nuxt Image自动应用Exif旋转 #

Nuxt Image默认基于sharp处理图片，sharp默认不会自动应用Exif旋转，可通过以下方式开启：

全局配置生效 #

在Nuxt的image配置中添加sharp参数：

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'],
  sharp: {
    rotate: 'auto' // 自动识别并应用Exif方向标记的旋转
  }
},  

组件层面单独配置 #

如果全局配置未生效，可直接在NuxtImg组件中添加处理参数：

<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
    :modifiers="{ rotate: 'auto' }" /> <!-- 新增旋转参数 -->
</div>

方案3：上传时预处理图片（彻底解决） #

若上述配置无法解决，建议在图片上传至Supabase前，直接将Exif旋转应用到像素数据中，消除方向标记：

1. 前端上传前使用图片处理库（如browser-image-compression）处理图片：

import imageCompression from 'browser-image-compression';

async function handleUpload(file) {
  const options = {
    convertSize: 5000000,
    alwaysKeepResolution: true,
    preserveExif: false, // 不保留Exif，直接将旋转效果应用到图片像素
  };
  const processedFile = await imageCompression(file, options);
  // 上传processedFile到Supabase存储
}

2. 或在Supabase后台配置存储函数，自动修正上传图片的方向。

内容的提问来源于stack exchange，提问作者olivaxa