Vueのコンポーネントを作成する時に、imgタグを使って画像を読み出したい時があります。
動的に画像を指定する前提の場合は、v-bingにパラメータを渡して画像名（画像ファイルのパス）を指定します。
この記事では、静的な画像の指定方法についてまとめます。
指定方法
次のように、v-bindでsrc属性を指定し、
シングルコーテーションとダブルコーテーションで二重に囲みます。
<template> <img v-bind:src="'<画像名>'"> </template>
誤った指定方法
この指定方法に行き着くまでに調べたことや、失敗したことがありました。
その内容についても触れていきます。
src属性に直接画像名を指定する。
HTMLと同じように、画像名を指定することは出来ません。
<template> <img src="<画像名>"> </template>
この状態では、実際に出力されるパスはundefinedを入れた次の文字になってしまいます。
http://<ドメイン>/undefined<画像名>
シングルコーテーションもしくはダブルコーテーションのみ使用する
次のように、1つのコーテーションだけで画像名を指定する事は出来ません。
<template> <img v-bind:src='<画像名>'> </template>
この状態では、v-bindに指定された値を変数として解析してしまいますのでエラーになります。
Property or method "<画像名>" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
