技術

[Rails] image_tagを使わずにassets内の画像を指定する方法

投稿日:2019年8月4日 更新日:

こんにちは。さとうです。

今回はimage_tagを使わずにassets内の画像を指定する方法についてです。

結論

image_path("test.png")

上記のようにimage_path() を使えばOKです!

/assets/images/test.png のように直接指定するのはNGです。

もう少し詳しく

まず、Railsでコンパイルされたファイルには以下のようにハッシュ値が付与されます。

test-3e1de2bb6a447def67a92dedb2319d09211ea20b88b84dda2cef238180c69abc.png

このファイルを画面で表示するときにはimage_tag を使います。
image_tag<img>タグに画像URLを入れて表示してくれます。
このときに-3e1de2... というハッシュ値を気にする必要はありません。

image_tag("test.png")
# => <img src="http://example.com/assets/test.png">

そして今回の記事で紹介したimage_path は画像のパスだけを表示します。
もちろんハッシュ値を気にする必要はありません。

image_path("test.png")
# => "/assets/test.png"

おわりに

Railsでは直接assets からのパスを書いても反映されません。
必ずActionView::Helpers::AssetUrlHelperを使うようにしましょう。という自分への戒めも含めて記事に残しておきます。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[ionic] Error code 70 / requires a provisioning profile with the Push Notifications feature.

どうも中田です ionic使っててbuildで引っかかりましたー ionicでp …

no image

[Angular]リアクティブフォームのHTML側の記法

Angularのリアクティブフォームではtsファイル側でネストした構成を組むこと …

Slack Tasker系アプリで絵文字ステータスを自動設定(android 「Automate」)

Slackの絵文字ステータス、皆さん使っているでしょうか? 私は自分の居る場所に …

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …

no image

nginxにX-Robots-Tagを設定する

こんにちは 検索結果にページが表示されないようにするために metaタグには & …