img tag displays wrong orientation

css, html, image

Solution

I forgot to add my own answer here. I was using Ruby on Rails so it might not be applicable to your projects in PHP or other frameworks. In my case, I was using Carrierwave gem for uploading the images. My solution was to add the following code to the uploader class to fix the EXIF problem before saving the file.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

Problem

I have an image at this link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg As you can see, this is a normal image with correct orientation. However, when I set this link to src attribute of my image tag, the image becomes upside down. http://jsfiddle.net/7j5xJ/ ``` <img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/> ``` Do you have any idea what is going on?

Original source

Related problems