Rails helpers: image_tag
O curso trata do image_tag, o helper do Rails que gera uma tag <img> a partir de Ruby. Começa pelo único argumento obrigatório, um nome de arquivo, e pela tag autofechada que ele devolve. Explica o src com fingerprint que o Propshaft monta a partir de um hash do conteúdo do arquivo, e por que isso ajuda o cache do navegador. Mostra alt, width, height e loading passando pelo hash de opções. Também olha de relance para uma variante do Active Storage como fonte e confere cada saída com um arquivo de imagem temporário.
O que você vai aprender
- ✓Como o image_tag transforma um nome de arquivo em uma tag <img> autofechada
- ✓De onde vem o src com fingerprint no Propshaft
- ✓Por que nomes baseados no conteúdo permitem cache seguro de imagens
- ✓Como passar alt, width, height e loading pelo hash de opções
- ✓Como o image_tag aceita uma variante do Active Storage como fonte
- ✓Por que um arquivo ausente gera Propshaft::MissingAssetError
De <img> para image_tag
A aula 4 de Links e imagens, sobre a anatomia do <img>, tratou de src, alt, width, height e loading, e no fim mostrou esta linha sem parar nela:
Ler a aula completa grátis →Currículo
7 aulasDe <img> para image_tag
Liga os atributos do <img> ao image_tag, que gera a tag a partir de Ruby como o link_to.
O único argumento obrigatório do image_tag
Passa um nome de arquivo ao image_tag e recebe uma tag <img> autofechada com src com fingerprint.
De onde vem o -e8dc057d: o asset pipeline
Explica como o Propshaft põe um hash do conteúdo da imagem no nome servido, o que permite cache seguro.
Passando alt, width, height, e loading pelo hash de opções
Passa alt, width, height e loading pelo hash de opções, que escreve cada chave como atributo HTML.
Uma prévia: image_tag com uma imagem enviada
Lê uma linha do projeto em que o image_tag recebe uma variante redimensionada do Active Storage.
Verificando cada afirmação ao vivo
Confere cada saída com um arquivo de imagem temporário e mostra o Propshaft::MissingAssetError quando o arquivo falta.
Juntando tudo: a forma completa do image_tag
Revisa a forma completa do image_tag: uma fonte, nome de arquivo ou variante, mais um hash de opções.