Skip to content

Use Image to render images.

Accessibility

Always provide a meaningful alt.

Arguments

NameTypeDefaultDescription
srcStringN/AThe source url of the image.
altStringN/ASpecifies an alternate text for the image.
lazyBooleanfalseWhether or not to lazily load the image.
system_argumentsHashN/ASystem arguments

Examples

Default

GitHub
<%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub")) %>

Helper

GitHub
<%= primer_image(src: "https://github.com/github.png", alt: "GitHub") %>

Lazy loading

GitHub
<%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>

Custom size

GitHub
<%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", height: 100, width: 100)) %>