x
1
2
3
4
5
<div class="max-w-sm"> <div class="midwest-image"> <img class="midwest-image-main" src="https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk" alt="Sample image" loading="lazy"> </div></div>1
2
3
4
5
6
7
8
<div class="max-w-sm"> <%= render Midwest::ImageComponent.new( src: params[:src].presence || 'https://fastly.picsum.photos/id/685/800/600.jpg?hmac=sWb0xR86JlxAieZShPwfbn0gAT0FFv55TkLcfQTw0Hk', large: params[:large].presence, alt: params[:alt].presence || 'Sample image', nozoom: params[:nozoom] == 'true' ) %></div>Playground
Explore the component with live parameters.
| Param | Description | Input |
|---|---|---|
|
URL of the main image |
|
|
|
URL of the full-size image for the lightbox (leave blank to disable) |
|
|
|
Alt text |
|
|
|
Disable the lightbox |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Image/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."