【Rails】image_tagのリンク切れで代替画像を表示するイベントハンドラ

公開日:2018-11-25
最終更新:2018-12-01

個人開発のリアルRPG系Webアプリ「まちかどルートではタイムラインにみんなの投稿が流れます。

そして、それぞれの投稿には認証元サイトのアカウントに設定されているプロフィール画像が付くようになっています。

ところが、認証元のサイトでプロフィール画像を変更すると、そのあとすぐ「まちかどルート」に反映されず、画像のリンク切れを起こすことがありました。

そこで、下記のような対策を講じました。

代替画像を表示するイベントハンドラ

onerrorというJavaScriptのイベントハンドラを使います。

Railsのimage_tagで使う場合の記述は下記のとおりです。

<%= image_tag @user.avatar, :onerror => "this.src='/assets/missing.png'" %>

Action Cableで使うには

「まちかどルート」のタイムラインではサーバーとの双方向通信にRails 5.2の新機能であるAction Cableを使っています。

つまり、Webブラウザで再読み込みしなくても他のひとの投稿が流れてくるようになっているわけです。

そのなかでCoffeeScriptを記述しているのですが、そこにonerrorを使うには上記の"this.src='/assets/missing.png'"に使われているシングルコーテーションとダブルコーテーションの相性がよくありません。

そこで

<img onerror="this.src=&#39;/assets/missing.png&#39;" src="' + data['avatar'] + '" />

というようにシングルコーテーションを&#39;に置き換えて記述するとうまくいきました。

補足

以上のようなちょっとした手間でかっこ悪い画像のリンク切れを見せなくて済むようになりました。じつは今日はじめてHTML5のmeterタグを知りましたけど、必要に応じて調べてみるといろいろ便利な機能を知ることができますね。これからも学んでいきます。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@west2538onRailsの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする