Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image component renders img tag with empty class attribute if className prop is not passed and responsive=true #6788

Open
wesleybl opened this issue Feb 26, 2025 · 0 comments · May be fixed by #6789
Labels
01 type: bug 30 needs: triage New issue that needs confirmation before work begins

Comments

@wesleybl
Copy link
Member

Describe the bug
If the className prop is not passed and the responsive prop is false (default), the @plone/volto/components/theme/Image/Image/Image component renders an img tag with an empty class attribute. That is:

<img src="src" class />

To Reproduce
Steps to reproduce the behavior:

  1. Edit the View component in volto/packages/volto/src/components/manage/Blocks/Image/View.jsx, removing the className and responsive props passed to the Image component. Here:

<Image
className={cx({
'full-width': data.align === 'full',
large: data.size === 'l',
medium: data.size === 'm',
small: data.size === 's',
})}
item={
data.image_scales
? {
'@id': data.url,
image_field: data.image_field,
image_scales: data.image_scales,
}
: undefined
}
src={
data.image_scales
? undefined
: isInternalURL(data.url)
? // Backwards compat in the case that the block is storing the full server URL
(() => {
if (data.size === 'l')
return `${flattenToAppURL(data.url)}/@@images/image`;
if (data.size === 'm')
return `${flattenToAppURL(
data.url,
)}/@@images/image/preview`;
if (data.size === 's')
return `${flattenToAppURL(
data.url,
)}/@@images/image/mini`;
return `${flattenToAppURL(data.url)}/@@images/image`;
})()
: data.url
}
sizes={config.blocks.blocksConfig.image.getSizes(data)}
alt={data.alt || ''}
loading="lazy"
responsive={true}
/>

  1. Create a page with an Image block and save it with an image.
  2. Inspect the resulting img tag code.

Expected behavior
The img tag must not have a class attribute.

Software (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Volto Version 18.9.1
  • Plone Version 6.1.0
@wesleybl wesleybl added 01 type: bug 30 needs: triage New issue that needs confirmation before work begins labels Feb 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
01 type: bug 30 needs: triage New issue that needs confirmation before work begins
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant