vue.jsで、画像が表示されない

Question

rails(API)と、vue.jsとwebpackerで、CRUD処理のアプリを作っています。
ローカルに保存している画像をtemplate側で表示したいのですが、表示されません。
「Vue 画像　表示されない」等と調べて、v-bindをつけてみましたがそれでもダメでした。
どのようにすれば画像が表示されるか、ご教示いただけないでしょうか。
画像は、app/assets/images/play.png　のパスになります。

    <img v-bind:src="require('../../assets/images/play.png')">
    <img src="../../assets/images/play.png" >

Answer 1

画像は app/assets 以下ではなく app/static に置くと require('~/static/images/play.png') 等で参照できます。

（追記）
app/assets 以下でも app/static 以下でも動かすことはできるのですが、挙動が異なります。
前者は静的ファイルとして扱えないため require を使う必要があります。一方で、後者はビルド時に webpack の影響を受けず、静的ファイルなので example.com/static/images/play.png のようにしてアクセスできます。

注意しなければならないのは画像のパスで、ソースコード内でのディレクトリ構造とサーバ上でのディレクトリ構造を区別する必要があります。

静的ファイルを文字列として与えたい場合はサーバ上のディレクトリ構造で考えるため <img src="./static/images/play.png" /> となります。
変数として与えたい場合は app 直下を指定したほうが確実なため、'~/static/images/play.png' とするのが無難です。assets 以下でも同様です。

ちなみに、b-vind を使う場合とそうでない場合の違いがあるのは、前者が画像のパスが変数で与えられ、後者が文字列で与えられるからです。

Comments

[fork_]

staticディレクトリが無かったので新しく作り、配下にimagesディレクトリも作り、その下に画像ファイルを置いてみたのですが、<img v-bind:src="require('../../static/images/play.png')">
としてみましたが、変わらずです...

[fork_]

ご回答ありがとうございます。
assets配下と、static配下の置く場所の違いで挙動も異なるのですね....
自分のしたいこととしては、バインディングしないで、template内でただ画像を表示させたいです。
<img src="./static/images/play.png"/> としてみましたが、コンパイルエラーになってしまいました...。

[mktia]

static ディレクトリが元々存在しなかったため、追加で設定が必要かもしれません…。
わざわざお作り頂いた手前恐縮ですが、assets ディレクトリを使用して <img v-bind:src="require('./assets/images/play.png')" /> 等でも表示できます。
追記内に語弊がありましたが、直接ファイルを参照できないだけで静的ファイルとして画像を扱うので問題はないようです。
assets の場合のパスがどのようになるのか少し見えていませんが、~/assets/..., ../assets/... にしたり script 内で import playImage from '@/assets/images/play.png' として playImage を変数として与えたりする方法も考えられます。

static で実装する場合は参考までに。
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

[fork_]

public/imgh配下に置き、絶対パスで指定したところ、表示されました！
<img src="/img/play.png" alt="">
まだwebpackの知識が浅く、質問にお答えいただきありがとうございました。。