vueコンポーネントで画像リソースを含む時はbase64にして埋め込んだほうが良い

url-loaderを使う時は、vueコンポーネントをnpmにpublishして 別プロジェクトでnpm installして画像が表示されるか確認する必要あり。

HelloWorld.vue

<template>
  <div>
    <img :src="iconImage">
  </div>
</template>
<script lang="ts">
export default Vue.extend({
  data: function () {
    return {
      iconImage: require("./images/icon-google-docs-doc.svg"),
    };
  },
</script>

このような書き方で、vue-cli-service serveで画像が表示される事を確認。vue-cli-service build --target libで画像が書き出される事も確認して満足していたら、npm publishして別のvueプロジェクトでcomponentsとして再利用する時に画像が表示されない事が発覚。

他のvueコンポーネントはどうしているのかと色々画像のあるvueコンポーネントを確認したんだけど、画像ファイルを含んでいるvueコンポーネントが全く見つからなかった。
アイコンとかがあるコンポーネントも、簡単なデザインならcssで書いてるし、ちょっと複雑なSNSアイコン程度ならインラインsvgで表示されていた。

そういうものらしいから、画像はjsに埋め込んでおこう。最終的に、1つのjsファイルに全部入っているようにしよう。
結構なサイズのリソースが必要の場合は、ちゃんとnpm publishして別のvueプロジェクトでnpm installして表示される事を確認する事必須。