Width and height attributes in Image component

🙋Get Help
1

Hello,

On my website I successfully display images using Frontity’s native component, Image

I need to pass to this component the width and height attributes explicitly, but it doesn’t render the attributes correctly.

As I see in the documentation it is possible to pass these attributes to the Iframe component.

Any idea how to do it

2

You can simply pass them through the element just like a regular img tag:

<Image src="path/to/file" width="124" height="124" />

Easiest you can do is create a regular img element, and simply rename it to Image.

3

Thank you for your answer.

Unfortunately, your solution does not work for me.

In my code I have this.

<Image src="path/to/file" alt="My File" width="300" height="122" />

But then it renders this:

<img src="path/to/file" alt="My File" class="frontity-lazy-image" loading="lazy" style="" height="122" >

As you can see, the width attribute is lost, I don’t know the reason why it happens…

I have the latest versions of Frontity and its packages installed.

Thanks in advance

4

Hi @franfal1981 ,

Any width prop passed to the <Image> component should be passed to the final <img> tag as you can see in the implementation of the <Image> component

What I don’t see is the checking of this (passing width prop) in the tests so maybe there’s a bug.
@David any thoughts on this? Should we add this width prop use case to the tests of the <Image> component?

Anyway @franfal1981, can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions to technical issues with specific code

Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.

6

Hi there!

I have tried your suggestions again, and unfortunately it doesn’t work…

Only the height attribute is rendered, I sincerely believe that there is a bug in the component that prevents the width attribute to render…

I imagine that this same thing will happen to more frontity users…

I think it is something important to fix since google core web vitals recommends to specify in each image the 2 attributes (width and height).

Actually i have this code

<Image src={path-to-file} alt={alt-text} width={my-width} height="{my-height}"/>

And i get this

<img alt="alt text" class="frontity-lazy-image css-16mvcb1-Featured" loading="lazy" height="512" src="path-to-file">

As you can see width attribute is missing…

Regards!

7

I can confirm that the width is not set as an attribute on master (@frontity/components: 1.7.3), but it does work on the dev branch.

8

Thank you @Johan

@juanma do you think it is possible to add the width attribute in the next update of the package?

Regards

9

The next update should have the updated Image component.

Although I could provide a hotfix if needed. Only adds 3 or 4 lines.

10

HI @Johan and @franfal1981

A fix for this issue has been implemented and it will available in the next release