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

(Critical) Comparing AJAX GET Requests and HTTP GET Requests: identifying the true client

When a typical GET request is made through the browser, it can be said that the browser acts as the client. However, who exactly serves as the client in the case of a GET request via AJAX? Although it still occurs within the browser, I am intrigued to delv ...

javascriptajaxhttpclient-server

Show occurrences of an array categorized by date using JSON format

I'm interested in analyzing a JSON array to find the occurrences of a specific item by date. Let me demonstrate with the following JSON example: "data": [ { "tags": [ "foo", "bar", "hello", "world", " ...

javascriptarraysjsondate

Issues with implementing Rails 4 with jQuery, javascript, and coffee scripts causing functionality to malfunction

Although I have nearly two decades of experience in C/C++ for control systems and firmware, as well as proficiency in shell and perl scripting, I am new to rails and web development. Despite including jquery in the application.js manifest, I am unable to ...

javascriptjqueryruby-on-railsrubycoffeescript

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

Having trouble retrieving data from my API and encountering this error message. I suspect it may be related to the JSON structure. Interestingly, when using a different URL with nested arrays, it works fine. However, my current data is not cooperating. Any ...

javascriptjsonreactjsnext.js

React Native: struggling to fetch the most up-to-date information from an array

I'm working on a chat application that functions similar to a chatbot. Since I don't want to use a database and the messages are temporary, I opted to utilize JavaScript arrays. Whenever a user inputs a message in the TextInput and hits the butto ...

javascriptreactjsreact-native

Exploring the Integration of Node Modules with React

I am still learning about Node and I'm struggling to integrate an NPM package with my React project running on Node. Currently, I have a React component that successfully uploads a zip file through Node server scripts. Now, I am working on the next s ...

javascriptnode.jsreactjsunzipadm-zip

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page. To implement this, I inserted a color picker in my HTML: <input type="color ...

javascripthtmlcss

The features of findOneAndRemove and findOneAndUpdate are not functioning optimally as expected

Attempting to create a toggle similar to Facebook's "like" feature. The code functions correctly when there are no existing "likes." It also deletes properly when there is only one "like" present. However, issues arise when multiple likes accumulat ...

javascriptnode.jsmongodbexpressmongoose

I encountered an issue while attempting to download a zipped folder using an AXIOS get request, as the folder appeared

I have developed an application in NodeJs for the backend and VueJS for the frontend. I am attempting to download a zip file that is generated within the app on the frontend using the code snippet below: const downloadZIP = () => { AXIOS_REQUEST( ...

node.jsvue.jspostman

Exploring user inputs and displaying variables using JavaScript and HTML 4.01

I was testing some code and I'm facing an issue that I can't figure out: <HTML> <head> <title> Page 1 </title> <script> function myFunction() { var x=document.getElementById("myEmail") document.write(x) } </scr ...

javascripthtmlhtml4

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...

javascriptangularangularjstypescript

Kratos configuration unable to update password successfully

I have developed a customized user interface for the Ory Kratos settings flow. However, I am facing an issue where even though the system confirms that my settings have been updated successfully after submitting the flow, my new password is not being dis ...

vue.jsorykratos

"Getting Started with Vue.js: Exploring the setup() and mounted

I recently started using Vue.js and am currently tackling a project. In my setup(), I've declared some constants, with one of them named "c". I found that I can still use console.log(this.c) in mounted() to print out the constant, but when I attempt t ...

vue.jswebvuejs3vue-composition-api

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

In the following code snippet, I am looking to send the id=content to the function mr and then display the result in the passed id=result. While this functionality is currently limited to this HTML file, I aim to extend it to other HTML pages by adding the ...

phpjavascriptajaxxmlhttprequest

Tips for automatically closing the Toggle Navigation feature in Vue JS when a user clicks outside of the navigation container

Is there a way to close the toggled navigation menu automatically when the user clicks outside of the navigation container? I have implemented two ul menus inside the navigation menu and would like the subNavActive, safNavAcitve, and repNavUl variables to ...

javascriptvue.jsvuejs2vue-component

Showing arbitrary text on Vue.js template

In my Vue.js application, I have a Loader component that randomly displays one of several messages. Here is how I implemented it: Vue.component('Loader', { data() { const textEntries = [ 'Just a moment', ...

javascriptvue.js

Ways to update state based on changes in localStorage values

Is there a way to update the state when the value of localStorage changes? For instance, I have a language switch button for French and English. When I click on English, it gets stored in localStorage. How can I ensure that the entire project switches to t ...

javascriptreactjsnext.js

What is the best way to convert a 2D PHP array into a JavaScript array?

I have encountered a problem with a PHP array setup as follows: $output = array(array(1,1,1,1),array(2,2,2,2),array(3,3,3,3)); When I encoded the array to JSON, I received this output: $output = {"1":[1,1,1,1],"2":[2,2,2,2],"3":[3,3,3,3]} My goal is to ...

phpjsonjavascript

Can you help me with sorting asynchronous line points for KineticJS?

For the past couple of days, I've been grappling with a peculiar issue that I found difficult to articulate in the title. The challenge I'm facing involves a KineticJs Line, which contains an array of points (line.attrs.points) represented as ob ...

javascriptjqueryhtmlcanvaskineticjs

Automating the process of transferring passwords from Chrome Password Manager to a Chrome Extension

Embarking on my first chrome extension journey, I have been developing a password manager app that offers enhanced functionalities beyond the default chrome password manager. A recent request from a client has come in, asking me to gather all passwords fr ...

javascriptangularjsgoogle-chromegoogle-chrome-extensiongoogle-chrome-app