BETA

【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タグを知りましたけど、必要に応じて調べてみるといろいろ便利な機能を知ることができますね。これからも学んでいきます。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@west2538onRailsの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!