时间戳

首页 > 解决方案 > 为什么图像文件输入会横向显示（翻转）？

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

问题描述

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

<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

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

标签： javascripthtmlcssvue.jsvuejs2

解决方案

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.

推荐阅读