ImageComponent
import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’
Use Image to render images.
Accessibility
Always provide a meaningful alt.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
tag |
Symbol, String |
:img |
The rendered tag name |
src |
String |
N/A | The source url of the image. |
alt |
String |
N/A | Specifies an alternate text for the image. |
lazy |
Boolean |
false |
Whether or not to lazily load the image. |
classes |
String |
"" |
Classes and attributes |
attributes |
Hash |
{} |
Classes and attributes |
Examples
Default
<%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
Helper
<%= ariadne_image(src: "https://github.com/github.png", alt: "GitHub") %>
Lazy loading
<%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
Custom size
<%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
Have questions?
Still have questions? Talk to support.