From <img> to image_tag

Free preview 2 min to read

Lesson 4 of Links and images, on the anatomy of <img>, covered src, alt, width, height and loading, then showed this line near the end without stopping on it:

<%= image_tag "blue-tshirt.jpg", alt: "..." %>

That lesson said image_tag "resolves the path through the asset pipeline", the same benefit stylesheet_link_tag gave CSS in Metadata tags. It didn't explain either claim, on purpose: its job was the attributes, not the helper that writes the tag.

Rails helpers: link_to took an <a> tag whose attributes were already explained and showed link_to generating it from Ruby. image_tag does the same for <img>. Every attribute here, src, alt, width, height and loading, was covered in Links and images. Their meaning doesn't change; only who writes them does.

This course's shape

Lesson 2 opens image_tag, generating an <img src="..."> tag from one filename. Lesson 3 explains "resolves through the asset pipeline": the fingerprinted filename this project's Propshaft setup produces. Lesson 4 passes alt, width, height and loading through the options hash, as link_to's class: did. Lesson 5 glances at where this project's images go further, Active Storage variants, without teaching that system. Lesson 6 checks it all live. Lesson 7 shows image_tag's full shape and looks ahead to form_with.

Lesson 1 of 7 · free

Keep going with lesson 2

image_tag's one required argument

Passes one filename to image_tag and gets a complete self-closing <img> tag with a fingerprinted src.

A free account also gives you the quizzes, your progress and notes, and the discussion.

Type to start searching...