Responsive Image
Picture element with srcset, lazy loading, and blur-up placeholder.
Preview
Arguments
responsive_image(src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Crect width='160' height='90' fill='%233b82f6'/%3E%3C/svg%3E", alt='A blue placeholder')
Usage
views.py
python
from djust import LiveView
from djust.components import ResponsiveImage
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = ResponsiveImage(src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Crect width='160' height='90' fill='%233b82f6'/%3E%3C/svg%3E", alt='A blue placeholder')my_template.html
django
{{ component }}Needs its script on the page: <script src="{% static 'djust_components/responsive-image.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| src | str | '' | Image URL (required) |
| alt | str | '' | Alt text (required for accessibility) |
| aspect_ratio | str | '' | CSS aspect-ratio value (e.g. "16/9", "4/3", "1/1") |
| lazy | bool | True | Enable native lazy loading (default True) |
| srcset | str | '' | Optional srcset attribute value |
| sizes | str | '' | Optional sizes attribute value |
| placeholder | str | '' | URL for blur-up placeholder image |
| custom_class | str | '' | Additional CSS classes |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.responsive_image | Subclass it, or pass custom_class, to change how it renders. |
| css | djust_components/components.css | Defines 2 of this component's classes at line 1287, 1288. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |