質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,016

score 36

現在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

実現したいこと

トップページに画像を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を学習し始めて2週間程度の初心者のため、質問の仕方が間違っている場合はご指摘ください。
どなたか、ご教示いただければ幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • _Victorique__

    2019/02/03 14:35 編集

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

    キャンセル

  • ayachika

    2019/02/03 14:59

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

    キャンセル

回答 2

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/16 14:47

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

    キャンセル

0

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の動作は一緒になるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 20:49

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

    キャンセル

  • 2019/02/06 20:54

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

    キャンセル

  • 2019/08/27 14:21

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る