Rendering problem

[Lith]

Hello,

We are trying to use the plugin for our Angular Universal (9) project. But we have an unexpected problem when we change img to ci-img.

Example with a logo :

<img src="https://storage.googleapis.com/riderclub-assets/images/logo_maif_white_v2.png" width="50" />

ci-img code :

        <ci-img
          src="https://storage.googleapis.com/riderclub-assets/images/logo_maif_white_v2.png"
          operation="width"
          size="50x39"
          style="width: 50px;" <!-- try to force with an image size of 50px -->
        ></ci-img>

But many styles are added on img and picture element rendering :

The image is completely deformed (100% full screen width instead of 50px width).

How can we remove style set on <picture> and <img> element ?

Thanks,

[dzmitry-stramavus]

hey @Lith,

The plugin has some Layout/CSS requirements:

In order to use smooth transition between preview image and good quality image, the plugin uses absolute positioning for images and wraps an image tag with div(picture) element with relative positioning.

You have to pay attention on the following thing: he plugin sets 100% width for img tag and apply absolute positioning (You should not apply other sizes or change position property. If you need to change width of image or position, you have to set it to wrapper)

so for example:

<div>
  <img …>
</div>

and we need to have 50px width image, then we should do

<div style=“width: 50px;”>
  <img …>
</div>

NOT

<div>
  <img style=“width: 50px;” …>
</div>

We have plans to make one more version with no CSS, but it'll be without nice animation effect.

[Lith]

Hi @dzmitry-stramavus,

Thanks for your reply. Concerning the server side rendering, have you planned an update ? Do I need to open an other issue for that ?

We will used your feedback about the CSS properties.

Thanks !

[dzmitry-stramavus]

@Lith yes, pls open an issue about SSR. thx