Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】

初心者向けにRailsのimage_tagの使い方について現役エンジニアが解説しています。image_tagを使うとRailsで画像を表示させることが出来ます。画像に付随するidやclassやalt属性なども、コマンド記法で書くことにより設定することが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Railsのimage_tagの使い方について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Railsのimage_tagの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

image_tagとは

image_tagとはHTMLの<img>タグを生成するためのメソッドになります。

image_tagの使い方

image_tagは画像ファイルへのパスと、必要なオプションを指定して使用します。

 

image_tag "rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

画像ファイルの配置箇所は一般的に2箇所です。app/assets/images配下と public配下です。

app/assets/images配下の場合は先ほどの例のように書けば良いのですが、public配下の画像を表示する場合には、画像ファイルのパスを次のように / から記載する必要があります。

public配下の画像を表示する場合は / から始める。

image_tag "/rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

image_tagで画像を表示してみよう

今回は.erbファイルに書いてみましょう。まずは好きな画像をapp/assets/imagesとpublic配下に格納してください。

その後、erbファイルに次のように記載しましょう。画像ファイル名はご自分の配置したものに、widthは好きなサイズに変更してください。

 

<div>
  <%# app/assets/images %>
  <%= image_tag "rails_icon.png", alt: "Rails icon", id: "assets", class: "image", width: "300px" %>
</div>
<div>
  <%# public %>
  <%= image_tag "/rails_icon.png", alt: "Rails icon", id: "public", class: "image", width: "300px" %>
</div>

 

記載したらrails serverを実行して、上記の内容が表示されるページにアクセスしてみましょう。次のように、画像が2枚表示されていれば成功です。

railsのimage_tagの使い方

app/assets/imagesに配置したファイルとpublicに配置したファイル、どのようなHTMLになっているのか見てみましょう。

Chromeの場合、Windowsなら[F12]キー、Macなら[Command]+[Shift]+[I]キーでDeveloper Toolsを開くことができます。

Elementsタブで画像部分の<img>タグを見てみると、ファイルパスとファイル名が違うことがわかりますね。

railsのimage_tagのソースコード

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。