为什么图像文件输入会横向显示（翻转）？

Question

所以我目前在 Vuejs 中有一个组件，用户可以从他们的本地文件系统中选择一个文件。用户选择图像后，图像会在div codesandbox 中预览。出于某种原因，一些图像会自动“翻转”到一边。主要是来自手机的图像，高度远大于宽度。

<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;
}

在代码框中，您可以上传图片并显示预览。我还在数据属性中包含了img2。如果您将:style="{ 'background-image': `url(${img})` } " 设置为img2，您就会明白我的意思。基本上：gyazo

如何正确显示图像？没有翻转。

Answer 1

图像实际上已旋转，您的软件正在使用元数据提示将其旋转回来。

您应该物理旋转图像，或使用 css 变换。