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变换。

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

1 个答案: