When NuxtImg is utilized, the image will rotate 90 degrees with Nuxt3 NuxtImg

Recently, I have encountered an issue when using NuxtImg where my images appear rotated by 90°. This problem specifically arises with vertical mobile images that are read from supabase and displayed. Interestingly, the images look fine before uploading them or while they are on supabase (in portrait orientation).

Strangely, switching to the standard img tag resolves the rotation issue and the images display correctly in portrait style...

This is my current 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']

},

Here's the code snippet for 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>

javascriptimagevue.jsnuxt.js

Answer №1

Robert emphasized that the issue lies within the EXIF metadata. This metadata stores various details about images like dimensions, geolocation, and orientation.

When you use a traditional <img> tag or view the image on Supabase, it appears correctly because the original image with its intact EXIF data is being used. The browser reads this data to display the image in the right orientation.

In contrast, NuxtImage removes or replaces the original EXIF information during pre-rendering or optimization. As a result, your browser fails to auto-rotate the image correctly, leading to an incorrect orientation.

If you are using the default IPX provider, you can ensure NuxtImage retains the original EXIF orientation by adding specific metadata to your <NuxtImg> and <NuxtPicture> components:

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

If the rotate modifier is present but lacks a value, NuxtImage will fallback to the orientation indicated in the EXIF data (Note: IPX utilizes Sharp for image processing).

To clarify, this process does not maintain the original EXIF metadata; instead, NuxtImage adjusts the image pixels to replicate the original orientation specified in the metadata.

Further Reading

Answer №2

If your images are rotating at a 90-degree angle when using NuxtImg, it may not be an issue with Nuxtimg but rather a server-side issue related to EXIF data stored in the image file. EXIF data contains information about the image's orientation, and some browsers and photo viewers automatically apply rotation based on this data.

To address this issue, you can try the following methods:

1. Add NuxtImg modifiers to specify a custom rotation angle for the image:

<NuxtImg
  provider="imagekit"
  src="/default-image.jpg"
  :modifiers="{rotate: 90}"
/>
  1. Create a separate file named image_rotation.js and add custom Vue directives to modify the image rotation angle.

The image_rotation.js file should be included in the nuxt.config.js file, and the directives can be added to your code as shown below:

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

This trick might help resolve the issue for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for combining two collections into a single output in MongoDB with Node.js

My MongoDB collections consist of data that I need to merge using the $lookup operation. However, the result I get contains a nested array structure that is not ideal. I am looking for a solution to format the result as shown below: First collection locati ...

javascriptnode.jsmongodbcollections

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml

Tips for creating a highly adaptable code base- Utilize variables

Can anyone help me optimize this lengthy and cumbersome code in HTML and JS? I want to make it more efficient by using variables instead of repeating the same code over and over. In the HTML, I've used href links to switch between different months, w ...

javascriptjqueryhtmloptimization

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

Within my app.js file, I have the following code snippet: app.use(session({secret: 'mySecret', resave: false, saveUninitialized: false})); While this setup functions correctly, it triggers a warning message: The cookie “connect.sid” will ...

javascriptnode.jsexpresssessioncookies

Encountering an unexpected token error in Vercel during deployment, even though the code runs smoothly in the

I'm facing an issue with a SyntaxError: Unexpected token '??='. I am not sure how to resolve it, so any help would be greatly appreciated. Thank you in advance. SyntaxError: Unexpected token '??=' at wrapSafe (internal/modules ...

javascriptnext.jsdeploymentvercel

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Rails encountered a syntax error while attempting to parse JSON data, due to an unexpected character found at line 2, column 1

I'm a beginner when it comes to using AJAX in Ruby on Rails. What I'm trying to achieve is that when a user clicks on a link with the class .link (redirecting to an external site, for example www.google.de), it should send data - specifically the ...

javascriptjqueryruby-on-railsjsonajax

Invoking a method in a child component by clicking a button on its parent Vue component

Struggling to figure out how to trigger the toggleDetails method of postDetails from the parent component's img tag. Parent: <div v-for="post in loggedInUser.posts" :key="post._id"> <postDetails :post="post"></postDetails> ...

vue.jsvuexparent-child

What is the best way to determine the amount of distinct elements in an array of objects based on a specific object property?

I am working with an array called orders. orders = [ {table_id: 3, food_id: 5}, {table_id: 4, food_id: 2}, {table_id: 1, food_id: 6}, {table_id: 3, food_id: 4}, {table_id: 4, food_id: 6}, ]; I am looking to create a function that can calculate ...

javascripttypescriptecmascript-6

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

When viewed on a small screen, my website transforms its menu into a hamburger button. Clicking the button toggles a sidebar displaying a stacked version of the menu on top of the normal website (position: fixed; z-index: 5;). This sidebar also triggers a ...

javascriptjqueryhtmlcssiphone

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

I've been encountering an issue where I am unable to fetch a specific JSON data as it times out and fails to receive a response on Vercel deploy. The JSON data I'm trying to fetch is only 18KB in size and the fetch request works perfectly fine in ...

javascriptnext.jsaxiosfetch-apivercel

Is the image being altered by the function on lpmj.net?

if ($typeok === true) { list($width, $height) = getimagesize($saveto); $true_width = $width; $true_height = $height; $maximum_size = 100; if($width > $height && $maximum_size < $width) { $ ...

phpimage

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

javascripthtml

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

I'm having trouble implementing the feature that closes other divs when I click on a new div with the same class. It seems like it should be straightforward, but for some reason, it's not working for me. Here is the link to the fiddle where I&apo ...

javascriptjqueryhtml

In JavaScript, loop through an array of arrays and combine them using the concat

If I have an array like [["a", "b"], ["c", "d"]], is there a way to iterate, reduce, map, or join this array in order to get the desired output of ["ac", "ad", "bc", "bd"]? What if the array is structured as [["a", "b"], ["c", "d"], ["e", "f"]]; how can we ...

javascriptarraystypescript

Instructions for implementing a "Load More" feature on blogs using either HTML or JavaScript

When retrieving blogs from a SQL Database, some of them tend to be lengthy. To tackle this issue, I plan on trimming each blog down to around 30 words (this amount may vary) and then incorporating a Load More link at the end. This link will enable users to ...

javascriptjqueryhtml

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with the password strength indicator in React-redux?

Hey there, I'm currently working on implementing a progress strength bar for password validation in React. While I've made progress with the code to check the password regex, I'm struggling to understand how to incorporate the password stren ...

javascriptreactjsreduxpasswords

Connect my asp.net grid view to JavaScript using AJAX

I am seeking guidance on how to bind my gridview from JavaScript in an ASP.NET web forms application. My objective is to click a linkbutton within my gridview and have it trigger a modalpopup that displays another gridview. Here are snippets of my code s ...

c#javascriptjqueryasp.netajax

Efficient Pagination with React Redux

Case One: I am currently implementing server-side pagination in Rails using React for the front-end and Redux for state management. I have completed all the necessary setup, and the only thing left is to pass the newly generated URL to fetch the new data. ...

javascriptruby-on-railsreactjsreduxthunk