Why does image file input gets displayed sideways (flipped)?

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 divcodesandbox. 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.