0

So I currently got a component in Vuejs where the user can select a file from their local file system. After the user selected an image, the image gets previewed in a div codesandbox. For some reason, some images get 'flipped' sideways automatically. Mainly images from mobile phones where the height is much longer than the width. 

<div
        id="capture"
        class="image-input"
        :style="{ 'background-image': `url(${img})` } "
        @click="chooseImage"
      >
        <span v-if="!img" class="placeholder">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </span>
        <input type="file" ref="fileInput" @change="previewImage">
</div>

.image-input {
  display: block;
  width: 150px;
  height: 150px;
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px;
}

In the codesandbox you can upload an image and a preview is shown. I've also included img2 in the data property. If you set :style="{ 'background-image': `url(${img})` } " to img2 you can see what I mean. Basically: gyazo

How can I display the image properly? Not flipped.

Reinier68
  • 2,450
  • 1
  • 23
  • 47
  • It most likely is an issue where EXIF-data is used to rotate the image in your favourite image viewing program, but not in the background image. – Sumurai8 Nov 09 '19 at 13:42
  • This issue may be duplicated with this - [images-are-being-rotated-by-default-upon-upload](https://stackoverflow.com/questions/42702864/images-are-being-rotated-by-default-upon-upload) – sugars Nov 09 '19 at 13:53

1 Answers1

0

The image is actually rotated and your software is rotating it back using metadata hints.

You should either physically rotate the image, or use a css transform.

Steven Spungin
  • 27,002
  • 5
  • 88
  • 78