Railsでプロジェクト内の画像ファイルを表示させる２つの方法

Railsでアプリケーションを作って、

そのアプリケーションを作っていく中で、

レイアウトのデザインに、

画像を使うことは一般的にあります。

その際、

画像を設定して呼び出すためには、

どのようにしたら良いのか、

この点について、

簡単にこの記事にメモしておきます。

Rubyのバージョン

まずは、

試した時のRubyのバージョンですが、

コマンドで確認します。

ruby -v

のコマンドを実行して確認すると、

$ ruby -v
ruby 3.0.4p208 (2022-04-12 revision 3fa771dded) [arm64-darwin21]

このバージョンであることが確認できました。

Railsのバージョン

Railsに関しては、

プロジェクト導入時に最新を取得したので、

その結果としてのRailsのバージョンですが、

コマンドで確認します。

rails -v

のコマンドを実行して確認すると、

$ rails -v
Rails 7.0.4.2

このバージョンで作成されていました。

画像ファイルを表示させるための２つの方法

Railsのプロジェクト内の画像ファイルを、

レイアウトの中で表示させるためには、

２つの方法があります。

その方法とは、

• assetsフォルダにアセットファイルとして使う方法
• publicフォルダに公開ファイルとして使う方法

この２パターンになります。

それぞれの方法で、

プロジェクト内の画像が表示できるので、

実際に試してみましょう。

assetsフォルダにアセットファイルとして使う方法

まずは、

アセットファイルとして、

画像ファイルを設置することで、

そのファイルを呼び出して表示する方法です。

画像ファイルの配置場所

画像ファイルを、

プロジェクトフォルダの中の、

app/assets/images/

というフォルダの中に配置します。

例えば、

app/assets/images/sample.png

となるようにファイルを設置します。

レイアウトファイルでの画像ファイルの呼び出し

先ほどの例で、

app/assets/images/

の中にある、

sample.png

というファイルを呼び出すには、

<img src="<%= asset_path( 'sample.png' ) %>" />

のように、

asset_path

をすることで、

画像ファイルを表示することができます。

publicフォルダに公開ファイルとして使う方法

次に、

公開ファイル（publicファイル）として、

画像ファイルを設置することで、

そのファイルを呼び出して表示する方法です。

画像ファイルの配置場所

画像ファイルを、

プロジェクトフォルダの中の、

public/

というフォルダの中に配置します。

例えば、

public/sample.png

となるようにファイルを設置します。

レイアウトファイルでの画像ファイルの呼び出し

先ほどの例で、

public/

の中にある、

sample.png

というファイルを呼び出すには、

<img src="<%= public_compute_asset_path( 'sample.png' ) %>" />

のように、

public_compute_asset_path

をすることで、

画像ファイルを表示することができます。

参考）public_compute_asset_pathを使わない方法

先ほどの、

public_compute_asset_path

を使わなくても、

公開フォルダ（publicフォルダ）であれば、

直接、画像のパスを書くことで、

画像を表示することがでます。

具体的には、

• publicフォルダが、トップルートのパスになる

ということが言えるので、

この点を使って、

公開フォルダの画像を表示することができます。

例として、

public/

の中にある、

sample.png

というファイルを呼び出すには、

<img src="/sample.png" />

という形で、

直接、パスを設定することで、

画像ファイルを呼び出すことが可能です。

ただし、

Railsプロジェクトとして、

公開ファイルを使う場合は、

public_compute_asset_path

を使うように統一すると良いでしょう。