Why am I getting "Image elements do not have explicit 'width' and 'height'" errors in Webflow even though I have specified the attributes?

TL;DR
  • Set 'width' and 'height' directly in Webflow's Designer panel, not just in custom code.
  • Publish the site to clear caches and verify changes using browser developer tools.

You're encountering the "Image elements do not have explicit 'width' and 'height'" errors because Webflow might not recognize or apply your specified attributes correctly during the next step of publishing.

1. Check Image Settings

  • Ensure that 'width' and 'height' are set correctly in the image settings within the Designer panel. This can be done by selecting the image element and checking the styles panel for width and height properties.
  • Specify 'width' and 'height' under 'Image Properties' rather than only in the custom code.

2. Review Custom Code

  • If using custom code to define these properties, ensure that the syntax is correct, e.g., the attributes should be specified directly within the <img> tags.
  • Avoid using custom code for setting these attributes if you can set them natively in Webflow.

3. Clear Custom Caches

  • Publish your site to clear cached data and update the changes live, which might resolve temporary discrepancies in attribute recognition.

4. Debug with Dev Tools

  • Use the browser's developer tools to inspect the live site and verify if the width and height attributes appear in the image elements.

Summary

To solve the "Image elements do not have explicit 'width' and 'height'" errors, ensure the attributes are set directly in Webflow's Designer panel rather than relying on custom code. Verify the settings via browser dev tools and republish your site to apply changes.

Rate this answer

Other Webflow Questions