Vueのテンプレートでassetsのimageを使う（rails + webpacker）

assets/images 下の画像をVueのtemplate内で使いたい。

erb内でなら image_tag で行けるが、digestついてるので単に <img src="assets/images/image.png" />とはできない。

解決法

調べたらいくつか方法はありそうだったが、webpackerのドキュメントを読むと、

config/webpacker.yml の resolved_paths を利用すればいいっぽい。

github.com

Note: Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of whole parent directory if you just need to reference one or two modules

↑ ただコンパイル速度を低下させるため、パスの追加は慎重に行ったほうがいいとのこと。

images だけでよいなら、↓ のようにすればよい。

resolved_paths: ['app/asstes/images']

<template>
  <div>
    <img src='~image.png' />
  </div>
</template>

<script>
  import 'image.png'
  ...
</script>

ここ最近のいくつかの現場では、webpackとRails別々で管理しているプロジェクトだったので何気にwebpackerは初だが、今のところまだ辛いとかはない感じです（笑）

参考

• ruby on rails - How to access assets with webpacker gem - Stack Overflow