技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【ionic】リリースする!ちょっとその前に(version指定)

どうも、中田です。 ionic便利ですよね。 コマンド一つでマルチプラットフォー …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

プログラミンを触ってみた

2020年から小学校でのプログラミング教育が必修になる(かも?)ということで、 …

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …

no image

【Rails】El Captain で’$rails s’ が動かない件

どうも中田です。 開発用MacをEl Capitanにアップデートしたところ r …