The renderer will automatically scale images down to the available width, even when the provided inline style width is greater than the container width. You need to activate
enableExperimentalPercentWidth for percent-width support in images. See
RenderersProps.img for reference.
This library supports
object-fit CSS property. In the below example, which is very similar to the previous one, we set explicitly
object-fit: contain; to letterbox the image in the container of width
50% and height
The next image will be sized automatically thanks to the
computeEmbeddedMaxWidth props. The latter allows you to set the maximum width from
contentWidth, or disabling scaling by returning
Similarly to browsers, this library will place a print box before fetching image dimensions when both
height attributes are provided, or the two dimensions are set in the
style attribute. This is great to avoid layout shifts when images size jumps from 0 to the view box height, and is a hint to good web design.
You are kindly advised to read the Custom Rendering page before continuing.
useInternalRenderer has a great advantage over using
InternalRenderer prop: you have access to the internal component props. In this scenario, we are going to display an interactive thumbnail which will show the full resolution image when pressed. To do so, we are going to read the URI from the internal source prop (although we could also do this from the
attributes), and mangle it to get our "thumbnail" URI.
You can reuse to your advantage some building blocks of the internal renderer thanks to the following exports:
To render the container of the
To render the fallback view on error state.
To render the fallback view on loading state.
To render the image on success state..
To get the state of the image resource fetching.
In the below example, our custom renderer will display an activity indicator when the state is either "loading" or "success". This is for demonstration purposes, and of course you should handle the "success" state by rendering the
IMGElementContentSuccess component, or a custom component displaying an image.
You can take advantage of the
provideEmbeddedHeadersprop to pass headers to the image fetching conditionnaly. For example:
In this example, we are using a Bearer token to access a restricted resource. We could also use headers to take advantage of the new Responsive Image Client Hints standard.