【Rails × Vue】本番環境で画像が読み込めないエラー対応

AWSにデプロイしたRailsとVueで作成したポートフォリオにおいて画像が表示されないエラーが発生し、解決したのでその方法です。

修正前のディレクトリツリー

original_app
|
|--app
|  |
|  |--assets
|     |
|     |--images
|        |    
|        |--img1.svg
|
|--src
   |
   |--pages
      |
      |--Home.vue #このコンポーネントでimg1.svgを読み込みたい

Home.vue

<template>
  <img src="/assets/img1.svg">
</template>

開発環境だとing1.svgを読み込めたが本番環境だとうまくいかなかった。

原因

通常のrailsアプリであればviewファイルに/assets/画像ファイルと書けばassets以下のimagesフォルダからファイルを探してきてくれるがVueのファイルはjavascriptなのでそのような動作をしてくれなくなる。

修正後のディレクトリツリー

original_app
|
|--app 
|
|--src
   |
   |--assets #追加
   |  |
   |  |--img1.svg
   |
   |
   |--pages
      |
      |--Home.vue #このコンポーネントでimg1.svgを読み込みたい

Home.vue

<template>
  <img src="../assets/img1.svg">
</template>

画像ファイルをvueファイルをまとめているフォルダ内に収納してし、直接参照できるようにしてしまう。