Skip to content

Image

Use image to render images.
  • Alpha
  • Not reviewed for accessibility

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::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>

Helper

GitHub
<%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>

Lazy loading

GitHub
<%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>

Custom size

GitHub
<%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>