v6.0.0

Introducing <datocms-naked-image />

Now that both loading=lazy and aspect-ratio are broadly supported (> 93% of browsers) we can avoid complex JS to achieve lazy-loaded images with placeholders!

<datocms-naked-image /> generates minimum JS footprint, outputs a single <picture /> element and implements lazy-loading using the native loading="lazy" attribute. The placeholder is set as the background to the image itself.

Major changes to existing <datocms-image>:

• removed lazy-load: lazy loading is automatically disabled for images using priority
• removed root-style: you can simply use style to style the root element
• removed explicit-width
• added load event
• added rootRef and imageRef as public properties

Other

All the examples have been consolidated into a single SPA React application to ensure a straightforward maintenance process.

https://vue-datocms-example-datocms.vercel.app

v5.1.2...v6.0.0