Passing HTML / CSS Attributes not load for ionic 4 beta7.0.0-beta.2

[copts001]

i have problem i'm use in html <img-loader src="{{seller.sellerimageURL }}" useImg [imgAttributes]="imageAttributes">

and .ts this.imageAttributes.push({ element: 'class', value: 'circle-photo' })

but it not load class

https://sv1.picz.in.th/images/2019/07/26/KAJwUQ.png

[sbchopade]

Where did you write css for the class? Can you please mention its code?

[copts001]

write css in page // bootdetails.page.scss

[copts001]

I change to write in global.scss it work but only width not' work https://sv1.picz.in.th/images/2019/08/09/ZWx5FQ.png

[Unkn0wn0x]

I've found a simple way for me to attach for example a border-radius styling to the <img> element, which is dynamically created by the Ionic Image Loader.

Put the following styles in a globally available style sheet:

img-loader {        

    // Default border radius
    --border-radius: 0;

    // Custom border radius, if set
    $border-radius: var(--border-radius);

    & img {

        // Apply default or custom border radius
        border-radius: #{$border-radius};
    }
}

So we store a custom css variable, here called --border-radius, into a scss variable, then we access the child (<img>) and append the styling to it.

Now you can style any image, using the Ionic Image Loader (with <img> tags), like following:

[some code here]

& img-loader {
    --border-radius: 4px 4px 0 0;
}

[some code there]

So we pass the styling from the <img-loader> element to the <img>.

If no styling is passed, it will use the default border radius. The default value will be overwritten, if you append the css variable to a <img-loader>. No scss checks or something like that required here.

This can be adapted to any other styling like width, height or something else. Also you can rename the variables as you wish.

Hope it helps someone.