Search code examples
reactjsimagedslr

Image gets Rotated when using with img tag in React; Looks fine when opened with windows viewer

I have an image that I want to render using in react, but for some reason the image get rotated but when I open the image in mspaint and resave with no edits, it seems to render fine in react

Link to img: img link

Here is the link that can be used directly in the img tag's src:

https://drive.google.com/uc?export=view&id=1rdM2ubSQAALNrLlZo3TWmMzsQproUK95

TIA

Solution

  • I used JPEg Autorotate (link) windows tool to fix all the images. Although I also see they have a (npm link) to do the same which I didnt try. FYI, these images were taken from a DSLR camera. I also read images taken from a lot smart phones have the similar issue. And google photos and other tools fix these issues before rendering hence it looks fine.