Vue.jsでタブ切り替えと同時に画像表示させたい

前提

こんにちは、Vue.jsを学習しているものです。

タブの切り替えについて勉強していて、あるサイトにあったプログラムを参考に組んでみました。

以下のプログラムにてタブ内の画像を押すと、
下の画像表示欄にも同時にタブ内のと同じ画像が読み込ませたいのですが、調べてもなかなか解決策が見いだせず
こちらにて質問させていただきます。

ディレクトリはこちらになります。

現段階での表示

実現したいこと

上にも記載の通り、

以下のプログラムにてタブを押すと、
下の画像表示欄にもタブ内のと同じ画像を読み込ませたいです。

「TAB1」を押したときに下のスペースに「タブ1」と表示されています。
タブの切り替えに伴い下のスペース内の文字も普通に変更されているのですが、

画像となると表示が上手くいかず調べてみても中々解決策が見つからずの状態です。
表示されたとしても画像ではなく<img/item.png>と文字列そのまま表示されます。

この画像のように表示されるのが理想の形となっております。
説明が上手くできずにいるので画像を貼らせていただきます。
(画像は某サイト様よりお借りしております)

該当のソースコード

html
1    <body>
2
3    <div id="demo_app">
4        <div class="demo_flex">
5            <div class="demo_tab-title" :class="checkAct(index)" v-for="(item, index) in items"  @click="changeTab(index)">
6                {{ item.title }}
7                <img v-bind:src="item.img">                
8            </div>
9        </div>
10
11        <div class="demo_tab-body" v-cloak>
12            {{ items[current_tab].body }}           
13        </div>
14    </div>
15
16    <script src="https://jp.vuejs.org/js/vue.js"></script>
17    <script src="js/maker.js"></script>
18
19    </body>
20

js
1var demo_app = new Vue({
2    el: '#demo_app',
3    data: {
4      current_tab: 0 ,
5
6      items: [
7        {
8          title:'TAB1',
9          img: 'img/item1.png',
10          body:'タブ1'
11        },
12        {
13          title:'TAB2',
14          img: 'img/item2.png',
15          body:'タブ2'
16        },
17        {
18          title:'TAB3',
19          img: 'img/item3.png',
20          body:'タブ3'
21        } 
22      ] 
23    },
24    mounted: function () {
25      this.current_tab = this.$cookies.get("vue_mytab") || '';
26    },
27    methods: {
28      changeTab: function (index) {
29          this.current_tab = index;
30          this.$cookies.set("vue_mytab",index,60 * 60 * 24);
31        },
32      checkAct: function(index){
33        a = '';
34        if(this.current_tab == index){
35          a = 'act';
36        }
37        return a;
38      }
39    }
40  })

試したこと

{{ items[current_tab].body }}の下に{{ items[current_tab].img }}を書いてみたのですが、
「タブ1 /img/item1.png」といった文字列そのままの表示になってしまいます。

また、<img v-bind:src="item.img">など、v-bindで試してみたのですが、ページ全体が表示されませんでした。

サイトなどで調べてみるとCanvasなどのツールも同時に使用といった記事も見かけたので、
Vueだけでは難しいのかなと考えたりもしました。

どなたか案を提示してくださる方がいらっしゃったら教えてください。
よろしくお願いいたします。

fumito_94

2019/06/24 15:56

imgのパス自体はあっていますか？もしよろしければディレクトリ構成と、実際の表示画面を検証してイメージの部分のhtmlのスクショを貼っていただけないでしょうか？

退会済みユーザー

2019/06/24 16:08

>imgのパス自体はあっていますか？はい、画像が表示されているので合っているかと思います。 >ディレクトリ構成と、実際の表示画面を検証してイメージの部分のhtmlのスクショはい、ただいま質問内容を編集し、画像を貼らせていただきました。

fumito_94

2019/06/24 16:25 編集

検証のconsoleからみた時に何かエラーは出ていますでしょうか？ https://www.buildinsider.net/web/chromedevtools/01#page-9

退会済みユーザー

2019/06/24 16:27

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined" (found in <Root>) というのと、 TypeError: Cannot read property 'get' of undefined at Vue.mounted (maker.js:25) at invokeWithErrorHandling (vue.js:1863) at callHook (vue.js:4214) at mountComponent (vue.js:4081) at Vue.$mount (vue.js:9038) at Vue.$mount (vue.js:11923) at Vue._init (vue.js:5006) at new Vue (vue.js:5072) at maker.js:1 が出てきてます。

fumito_94

2019/06/24 16:34

html内のdemo_tab-bodyにimgタグを表示させていないように見えるのですが、それではなくてということでしょうか？ <img :src="items[current_tab].img">

退会済みユーザー

2019/06/24 16:38

ただいま、 <img :src="items[current_tab].img">と記述したら普通に表示されました。なので、問題は無事解決しました。丁寧に回答してくださり、本当にありがとうございます…！大変、助かりました。

fumito_94

2019/06/24 16:41

解決できて良かったです！！一応回答としても追記しておきました。

退会済みユーザー

2019/06/24 16:45

回答にも追記してくださりとても助かります…！この度は、初心者の質問ながらも分かりやすく解決策に導いてくださり、本当にありがとうございました。

行動規範の内容に同意します

回答2件

ベストアンサー

こちらを追記したら表示されると思います！
おそらくimgをそのまま文字列として表示させてしまっているので、imgタグのsrcの中で定義してあげると表示されます。

html
1<img :src="items[current_tab].img">

投稿2019/06/24 16:39

編集2019/06/24 16:40

fumito_94

総合スコア679

{{ items[current_tab].body }}の下に{{ items[current_tab].img }}を書いてみたのですが、文字列そのままの表示です。

文字列が表示されているのならitemsは渡せていると思います。

そのため、srcの参照先が読み込めていない可能性があるので 絶対パスもしく はimgの前に /を入れて読み込ませてみてください。

items: [
        {
          title:'TAB1',
          img: '/img/item1.png',
          body:'タブ1'
        },
        {
          title:'TAB2',
          img: '/img/item2.png',
          body:'タブ2'
        },
        {
          title:'TAB3',
          img: '/img/item3.png',
          body:'タブ3'
        } 
      ]

また試しに画像だけを表示させてみる検証をしてもいいかと思います。

以下参考URL

https://qiita.com/coppieee/items/4260bd0af246aebf5557

投稿2019/06/24 16:02