NUXT3 NuxtImg : 当我使用 NuxtImg 时图像旋转 90°

Question

当我使用 NuxtImg 时，我的图像旋转 90°。当我在 supabase 上读取并显示垂直移动图像时，会出现此问题。上传之前和在supabase上，图像都可以（肖像）。

当我使用 img 时，一切正常，图像发生变化并变成肖像风格......

我的 nuxt 配置：

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

},  

我的 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 />
      </div>

Answer 1

如果您运行 NuxtImg 时图像以 90 层旋转，那么这不是 Nuxtimg 从服务器端发出的问题。图像文件中存储的 EXIF 数据可能会发生这种情况。 EXIF 事实包括有关图像方向的记录，某些浏览器和照片查看器会自动应用该旋转。

因此您可以使用以下方法解决该问题，例如

1.添加 NuxtImg 修改器以使用添加自定义旋转角度到您想要的图像

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="{rotate: 90}"
/>

2. 添加自定义 vue 指令来修改图像旋转角度，因此创建单独的 image_rotation.js

import Vue from 'vue';
Vue.directive('image-rotation', {
  bind(el, binding) {
    const image = el;
    if (image.complete) {
      rotationImg(image);
    } else {
      image.addEventListener('load', () => {
        rotationImg(image);
      });
    }
  },
});
function rotationImg (image) {
  const canvas = document.createElement('canvas');
  const dataContex = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  dataContex.save();
  dataContex.translate(canvas.width / 2, canvas.height / 2);
  dataContex.rotate((image.getAttribute('data-orientation') || 0) * (Math.PI / 180));
  dataContex.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height);
  dataContex.restore();
  image.src = canvas.toDataURL('image/jpeg', 1.0);
}

此 image_rotation.js 文件包含在 nuxt.config.js 文件中，并且此指令添加到上面的代码中，如下所示

<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" v-image-rotation  placeholder />
</div>

也许这个技巧对你有帮助..