[備忘録]フロント側の対応だけでNginxでキャッシュされた古い画像が表示されないようにする

Nginxで画像ファイルをキャッシュするようにしていたのですが、同じ名前で画像を更新した場合に古い画像がしばらく表示されてしまいます。
かといって、まれにしか更新されない画像のためにキャッシュを無効にするのもイケてないので、解決策を調べてみました。

結論

imgタグのsrcに/path/image.jpg?xxxxxのようにパスの後にランダムな値を指定する

※右クリックで「名前を付けて画像を保存」しても?以降は認識されません。

具体例

参考にした投稿だとランダム値を指定してましたが、それだと常にキャッシュがスルーされてしまうのでレコードの更新日時を指定することにしました。

サーバーから以下のようなテーブルのデータを取得して、imageUrlの後ろに更新日時を指定することで、同名のファイルで更新して画像ファイルのURLが同じだったとしても更新日時が異なるためキャッシュから読み込まれず、最新の画像を表示することができます。

論理名	物理名	型
id	ID
画像URL	imageUrl	string
更新日時	updatedAt	string

test.vue

<template>
  <div>
    <img :src="imageUrl" />
  </div>
</template>
<script lang="ts">
  item;
  get imageUrl() {
    // 更新時に新しい画像が表示されるようにするため、更新日時をファイル名の後ろに付与
    return `${this.item.imageUrl}?${moment(this.item.updatedAt).format('YYYYMMDDHHmmss')}`;
  }

ただ、これだと画像URL以外のカラムが更新された場合でも画像を読み直してしまうので、頻繁に更新するようなテーブルの場合は要検討ですね。

参考