Rails helpers: image_tag
This course covers image_tag, the Rails helper that generates an <img> tag from Ruby. It starts with the one required argument, a filename, and the self-closing tag it returns. It explains the fingerprinted src that Propshaft builds from a hash of the file's content, and why that helps browser caching. It shows alt, width, height and loading passing through the options hash. It also looks briefly at an Active Storage variant as the source and checks each output against a temporary image file.
What you'll learn
- ✓How image_tag turns one filename into a self-closing <img> tag
- ✓Where the fingerprinted src comes from in Propshaft
- ✓Why content-based filenames let browsers cache images safely
- ✓Passing alt, width, height and loading through the options hash
- ✓How image_tag accepts an Active Storage variant as its source
- ✓Why a missing file raises Propshaft::MissingAssetError
From <img> to image_tag
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:
Read the full lesson free →Curriculum
7 lessonsFrom <img> to image_tag
Connects the <img> attributes to image_tag, which generates that tag from Ruby the way link_to generates <a>.
image_tag's one required argument
Passes one filename to image_tag and gets a complete self-closing <img> tag with a fingerprinted src.
Where -e8dc057d comes from: the asset pipeline
Explains how Propshaft hashes the image file's content into the served name, so browsers can cache it safely.
Passing alt, width, height, and loading through the options hash
Passes alt, width, height and loading through the options hash, which writes each key as an HTML attribute.
A glimpse: image_tag with an uploaded image
Reads a project line where image_tag receives a resized Active Storage variant instead of a filename.
Verifying every claim live
Checks each output with a temporary image file and shows Propshaft raising MissingAssetError when the file is missing.
Putting it together: image_tag's full shape
Reviews the full shape of image_tag: one source, either a filename or a variant, plus an options hash.