javascript - 为什么图像文件输入会横向显示(翻转)？

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

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

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

Answer 1

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

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