When using ngStyle to add height and width styles to an img element, I encountered a strange issue:
<img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize, 'width': selectedImage.widthSize}" [src]="selectedImage.imagePath" alt="Man Praying">
The image data is fetched from an object within a service file:
private images = [
new Image('Man Praying', 1, 'Cambodia', 'Man praying to Sun', '£100', '../../assets/Images/Cambodia/Praying to the Sun.JPG', '250px', '800px'),
]
The height is set to 250px and the width to 800px.
In a separate model file, the object constructor is defined as follows:
export class Image {
public name: string;
public id: number;
public album: string;
public description: string;
public price: any;
public imagePath: string;
public heightSize: any;
public widthSize: any;
constructor(name: string, id: number, album: string, description: string, price: any, imagePath: string, heightSize: any, widthSize: any) {
this.name = name;
this.id = id;
this.album = album;
this.description = description;
this.price = price;
this.imagePath = imagePath;
this.heightSize = heightSize;
this.widthSize = widthSize;
}
}
Interestingly, while the height style gets applied correctly, the width does not. Upon inspecting the element with Chrome dev tools, only the height style is present. Could there be something missing in my code that's causing this discrepancy?
This is how the element appears in Chrome dev tools:
<img _ngcontent-vxx-c18="" alt="Man Praying" class="image-full-view" ng-reflect-ng-style="[object Object]" src="../../assets/Images/Cambodia/Praying to the Sun.JPG" style="height: 250px;">
I have thoroughly checked my code to ensure that no other stylesheet is overriding the width of the image. Any insights on what might be causing this issue would be greatly appreciated!