I am currently working on a Vuejs component that allows users to select a file from their local system. Once the user selects an image, it is previewed in a div. However, I have noticed that some images appear 'flipped' sideways automatically, especially those from mobile phones with a longer height than width.
<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;
}
In the provided codesandbox link, you can upload an image and view the preview. I have also added img2 in the data property. If you change
:style="{ 'background-image': `url(${img})` } "img2, you will see the issue I am referring to. Check out this example: gyazo
How can I ensure that the image is displayed properly without being flipped?