I dont know if this is caused in angular only or is there css doing auto-rotation?
Look at the images below in windows explorer:
All those images are proper.
Now when I display them in browser:
You can clearly see the problem. All the images that are originally in portrait mode, are rotated automatically. Why this happens and what are the possible solutions?
Here is my code:
gallery.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.css']
})
export class GalleryComponent {
@Input() datasource;
selectedImage;
setSelectedImage(image) {
this.selectedImage = image;
}
}
gallery.component.html:
<div class="modal fade" id="selectedImageModal" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img *ngIf="selectedImage" src="{{selectedImage.url}}" >
</div>
</div>
</div>
</div>
<ul id="thumbnailsList">
<li *ngFor="let image of datasource" >
<img src="{{image.url}}" class="tn"
width="191" height="146"
data-toggle="modal" data-target="#selectedImageModal"
(click)=setSelectedImage(image) />
</li>
</ul>
gallery.component.css:
ul
{
padding:0;
width:780px;
margin:20px auto
}
li
{
display:inline;
}
.tn
{
margin:2px 0px;
box-shadow:#999 1px 1px 3px 1px;
cursor: pointer
}
.modal-content
{
width: 670px !important;
}
Then I am using this gallery component as follows:
<div class="col-md-8 col-md-offset-1">
<app-gallery [datasource]="images"></app-gallery>
</div>
Typescript:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
images;
constructor(){
this.images = [
{"url":"assets/Images/1.jpg"},
{"url":"assets/Images/2.jpg"},
{"url":"assets/Images/3.jpg"},
{"url":"assets/Images/4.jpg"},
{"url":"assets/Images/5.jpg"},
{"url":"assets/Images/6.jpg"},
{"url":"assets/Images/7.jpg"},
{"url":"assets/Images/8.jpg"},
{"url":"assets/Images/9.jpg"},
{"url":"assets/Images/10.jpg"},
{"url":"assets/Images/11.jpg"},
{"url":"assets/Images/12.jpg"},
{"url":"assets/Images/13.jpg"},
{"url":"assets/Images/14.jpg"},
{"url":"assets/Images/15.jpg"},
{"url":"assets/Images/16.jpg"}
];
}
}
Is there any way to stop this auto-rotation?
