0

When you go directly to the image URL the image is not rotated, but within the image tag the image is rotated.

https://codesandbox.io/embed/wonderful-beaver-zvfp2

I'm not sure what is going on

(I use Azure to host images)

Snoopy
  • 1,257
  • 2
  • 19
  • 32

1 Answers1

0

If this is happening to all images then you can simply add a transform css tag to rotate the image 90 degrees

eg:- 

    style={{
      height: "500px",
      borderRadius: "15px 15px 15px 15px",
      boxShadow: "0px 5px 15px -4px #000000",
      transform:"rotate(90deg)",  <-----
    }}
Harry Manoharan
  • 181
  • 1
  • 12
  • I think the issue is that if it's shot on portrait on a mobile phone it does this? Because all the other photos that I have don't exhibit the same issue – Snoopy Oct 09 '19 at 18:01
  • 1
    JPEG image files contain meta-data that describes the original orientation of the images, browsers do not support this yet. – Harry Manoharan Oct 09 '19 at 18:19
  • Please check this for further alternatives. https://stackoverflow.com/a/18643802/5074540 – Harry Manoharan Oct 09 '19 at 18:20
  • Thanks @harryManoharan! I used this http://exif.regex.info/exif.cgi and the EXIF data shows Oreintation at 90 CW. – Snoopy Oct 09 '19 at 18:23