Vue.jsで<img src>を用いると、画像が表示されないエラーについて

Question

現在Vue.jsとrailsでWebサイトを作成しています。
以下のエラーがでてしまったため、質問させていただきます。

#開発環境
Ruby 2.4.1
Ruby on Rails 5.2.2
Node.js 6.15.1
yarn 1.13.0
Webpacker 3.0.2
Vue.js 2.4.3

#実現したいこと
トップページに画像を３つ表示させたいと考えています。
情報収集していると単に表示させるだけであれば<img src>タグを用いればよいとあったのですが、そのとおりにすると画面にほかの要素もすべて表示されなくなります。

#でているエラー
templateの部分に直接画像埋め込みをすると、画面に何も表示されなくなる。

ディベロッパーツールで確認するとこのようなエラーがでていました。

vue.esm.js:610 [Vue warn]: Error in render: "Error: Cannot find module "./assets/images/pexels-photo-976906.jpeg""

found in

---> <Main> at app/javascript/packs/components/main.vue
       <Root>
warn @ vue.esm.js:610
logError @ vue.esm.js:1837
globalHandleError @ vue.esm.js:1832
handleError @ vue.esm.js:1821
Vue._render @ vue.esm.js:4664
updateComponent @ vue.esm.js:2908
get @ vue.esm.js:3278
Watcher @ vue.esm.js:3267
mountComponent @ vue.esm.js:2915
Vue.$mount @ vue.esm.js:8648
Vue.$mount @ vue.esm.js:11063
init @ vue.esm.js:4248
createComponent @ vue.esm.js:5699
createElm @ vue.esm.js:5646
createChildren @ vue.esm.js:5774
createElm @ vue.esm.js:5675
createChildren @ vue.esm.js:5774
createElm @ vue.esm.js:5675
patch @ vue.esm.js:6237
Vue._update @ vue.esm.js:2787
updateComponent @ vue.esm.js:2908
get @ vue.esm.js:3278
Watcher @ vue.esm.js:3267
mountComponent @ vue.esm.js:2915
Vue.$mount @ vue.esm.js:8648
Vue.$mount @ vue.esm.js:11063
Vue._init @ vue.esm.js:4754
Vue @ vue.esm.js:4821
(anonymous) @ main_vue.js:12
__webpack_require__ @ bootstrap e8e338932f932de6234d:19
(anonymous) @ bootstrap e8e338932f932de6234d:62
(anonymous) @ bootstrap e8e338932f932de6234d:62
vue.esm.js:1841 Error: Cannot find module "./assets/images/pexels-photo-976906.jpeg"
    at webpackMissingModule (main.vue?1475:22)
    at Proxy.staticRenderFns (main.vue?1475:22)
    at Proxy.renderStatic (vue.esm.js:4015)
    at Proxy.render (main.vue?1475:5)
    at VueComponent.Vue._render (vue.esm.js:4662)
    at VueComponent.updateComponent (vue.esm.js:2908)
    at Watcher.get (vue.esm.js:3278)
    at new Watcher (vue.esm.js:3267)
    at mountComponent (vue.esm.js:2915)
    at VueComponent.Vue.$mount (vue.esm.js:8648)

#ソースコード

javascript/packs/components/main.vue

<template>
  <div class="container">
      <div class="title">
          <h1>Hi, I'm Ayaka.</h1>
          <h1>This is my portfolio.</h1>
      </div>
  
  
  <div class="pictures">
    <div class="picture">
      <img src="./assets/images/pexels-photo-976906.jpeg">
    </div>
    
    <div class="picture">
      <img src="./assets/images/pexels-photo-1439965.jpeg">
    </div>
    
    <div class="picture">
      <img src="./assets/images/pexels-photo-1838615.jpeg">
    </div>
  </div>
  
</div>

</template>

どのように表記すれば、画像を表示させることができるでしょうか。
なお、こちらの画像はモジュール化させたいわけではなく、このページのみに使用するものです。

当方Vue.jsを学習し始めて２週間程度の初心者のため、質問の仕方が間違っている場合はご指摘ください。
どなたか、ご教示いただければ幸いです。

Comments

[_Victorique__]

画像のパスが合っているか確かめましたか？
試しにネットの画像のurl貼り付けてみるとか

[ayachika]

コメントありがとうございます！絶対パスにしたところ、画像は表示されました！いろいろとネットで調べてみると、コンパイルするときにsrcディレクトリの中のassetsディレクトリでないとコンパイルされず、画像が表示されないというような記事がありました。私のアプリにはsrcディレクトリというものがないため、また別の質問になってしまいそうです。一つ問題が解決したので、また調べてみます。ありがとうございます。

Answer 1

https://blog.fakiyer.com/entry/2018/12/04/152353

こちらの内容を試してみてはいかがでしょうか?

Comments

[ayachika]

ご回答ありがとうございます。実は今開発していたアプリを削除してしまい、すぐに確認してみることができないのですが、次回Vue.jsを使うときはトライしてみます。ありがとうございます。

Answer 2

Ruby on Railsと一緒に使ったことがないので、Vue.js一般の話しかできないのですが…。

VueアプリケーションをVue CLIで構築する際、アプリケーションの構成ディレクトリ内のファイルを再構成してdistディレクトリへ再配置する、という仕様があります。

実際にアプリケーションを動かす際、Vueアプリケーションが参照するのはdistディレクトリの中です。実際に画像が配置されているフォルダを直接参照することはできません。その結果、アプリケーションは動作しても、画像が表示されない状態になってしまうのです。

これを回避するためには、画像パスをrequire()で囲んであげます。このようにすると、Vueアプリケーション実行時、Vueがdist内に配置された画像のパスを参照してくれます。

• 参考

ayachikaさんのコードへ適用してみると、次のようになります。

  <div class="pictures">
    <div class="picture">
      <img v-bind:src=require('./assets/images/pexels-photo-976906.jpeg')>
    </div>

Railsアプリケーションとの組み合わせであっても、Vue.jsの動作は一緒になるかと思います。

Comments

[ayachika]

返信が遅くなってすみません。ご丁寧な解説ありがとうございます。コードを修正したところ、
'./assets/images/pexels-photo-976906.jpeg')>
の部分がそのまま文字として表示されてしまい、その他いろいろと修正してみたのですが、やはり画像がサムネイルのような表示になり、実際の画像が表示されませんでした。ご解説いただいたのに、原因が特定できずすみません。

[退会済みユーザー]

すみません！require部分はVue.jsの記法を利用しているので、<img v-bind:src=require(xxxx)>または<img :src=require(xxx)>と記述しないと正しく動かないです…。回答例も修正しました。

[ayachika]

いえ、解説・ご回答ありがとうございます！再度やってみたのですが、変わらず、'./assets/images/pexels-photo-976906.jpeg')>
の部分がそのまま文字として表示されてしまいました。少し変えてみて、
v-bind:src=require(./assets/images/app.image.png)こちらで試しても画面が真っ白になり、ディベロッパーツールでも何も表示されなくなってしまいました・・・ネットでもv-bindの記事は見付け、試してみるのですが、どれも効かないです・・・うまく原因がわからずすみません。画像アドレスをネットから引っ張ってきて表示させるのはできたのですが、assets内はなかなかできないですね( ;∀;)

[退会済みユーザー]

うーんなるほど…。Vueのコードが気になりますね。単一コンポーネントであれば、.vueファイル丸々1つ貼っていただくとこちらも切り分けしやすいです（Vueの問題なのか、つなぎこみの問題なのかなど）

[harrier22]

今更ですがダブルクォーテーションが抜けてるだけですね。
<img v-bind:src="require('./assets/images/pexels-photo-976906.jpeg')">