Таким образом, в настоящее время я получил компонент в 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
Как правильно отобразить изображение? Не перевернуто.