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

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

ただいまの
回答率

87.78%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,783

score 15

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

前提

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

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

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

ディレクトリはこちらになります。
イメージ説明

現段階での表示

イメージ説明
イメージ説明
イメージ説明

実現したいこと

上にも記載の通り、

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

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

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

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

該当のソースコード

    <body>

    <div id="demo_app">
        <div class="demo_flex">
            <div class="demo_tab-title" :class="checkAct(index)" v-for="(item, index) in items"  @click="changeTab(index)">
                {{ item.title }}
                <img v-bind:src="item.img">                
            </div>
        </div>

        <div class="demo_tab-body" v-cloak>
            {{ items[current_tab].body }}           
        </div>
    </div>

    <script src="https://jp.vuejs.org/js/vue.js"></script>
    <script src="js/maker.js"></script>

    </body>
var demo_app = new Vue({
    el: '#demo_app',
    data: {
      current_tab: 0 ,

      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'
        } 
      ] 
    },
    mounted: function () {
      this.current_tab = this.$cookies.get("vue_mytab") || '';
    },
    methods: {
      changeTab: function (index) {
          this.current_tab = index;
          this.$cookies.set("vue_mytab",index,60 * 60 * 24);
        },
      checkAct: function(index){
        a = '';
        if(this.current_tab == index){
          a = 'act';
        }
        return a;
      }
    }
  })

試したこと

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

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

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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • bero07

    2019/06/25 01:38

    ただいま、
    <img :src="items[current_tab].img">と記述したら普通に表示されました。

    なので、問題は無事解決しました。

    丁寧に回答してくださり、本当にありがとうございます…!
    大変、助かりました。

    キャンセル

  • fumito_94

    2019/06/25 01:41

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

    キャンセル

  • bero07

    2019/06/25 01:45

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

    キャンセル

回答 2

checkベストアンサー

+2

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

{{ 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/25 01:42 編集

    回答してくださり、ありがとうございます。
    只今、解決しましたのでご報告いたします。

    参考URLも提示してくださり、感謝します。
    私自身、srcの参照先についてあやふやなところもあったので参考URLにて学習しようと思っております。

    大変、助かりました。
    この度は、本当にありがとうございました。

    キャンセル

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

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

関連した質問

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