【Vue.js】img v-bind:srcをしても画像が表示されない【Google API】

##エラーの内容
現在さまざまなチュートリアルを見ながら、GooglebooksAPIを用いた本の検索アプリを作っています。
Vue.jsでaxiosを用いたJSONデータの取得を行い、ChromeのデベロッパーツールでJSONデータをgetし、各タイトルや著者の名前を表示するところまではできました。

そこで画像を表示するため、こちらの質問:v-forの中でimg v-bind:srcを使いたい。 Vue.jsを見つけ、記載のとおりにしてみました。
しかし、デベロッパーツールでエラーもでず、img要素も表示されているのですが、画像が表示されません。

この改善方法がわからず、ネット上でも解決策がなかったため、質問させていただきました。

何度も同じような質問ばかりで申し訳ありませんが、Vue.jsに知見のある方、ご教示いただけると嬉しいです。
以下、現在の情報です。

##ソースコード

html:index.html
1<html lang="en">
2  <head>
3    <meta charset="utf-8">
4    <title>Book Finder</title>
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
6    <link rel="stylesheet" href="main.css">
7  </head>
8  <body>
9    <div class="container" id="app">
10      <h3 class="text-center">Book Finder</h3>
11      <p> <!--v-modelでフォームとバインディング-->
12        
13        検索キーワード：<form v-on:submit.prevent="getResult(query)">
14              <input type="text" placeholder="Type in your search" v-model="query" />
15          </p>
16          <div class="card-wrapper">
17              <div class="card" v-for="item in items">
18              
19                <div class="card-thumbnail">    
20                  <img v-bind:src="item.thumbnail" />
21                </div>
22              
23                <div class="card-title">    
24                  <p>{{item.volumeInfo.title}}</p>
25                </div>
26                
27                <div class="card-authors">    
28                  <p>{{item.volumeInfo.authors}}</p>
29                </div>
30                
31              
32              </div>
33         </div>
34  </div>
35    
36    
37    
38    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
39    <script src="main.js"></script>
40    <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
41  </body>
42  
43</html>
44

js:main.js
1const vm = new Vue({
2  el: '#app',
3  data() {
4    return{
5      query:'',
6      items:[],
7      }
8    },
9  methods:{
10    getResult(query){
11      axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => {
12        console.log(response.data);
13        this.items = response.data.items;
14        });
15      }
16    }
17});
18

css:main.css
1/*仮入力の状態でいろいろと変えていく予定です*/
2.card{
3    width:50%;
4    height:100px;
5
6}
7
8.card-thumbnail{
9    width:40px;
10    height:40px;
11}
12
13

##参考情報

・作成中のアプリはこちらです。
・例えばharryを検索した結果のJSONデータはこちらのようになります。

##開発環境
cloud9
vue.js 2.9.6

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

回答1件

ベストアンサー

JSONを見る限り、

item.thumbnail

ではなくて、

item.volumeInfo.imageLinks.thumbnail

ではないですか？

投稿2019/03/18 16:27

NozomuIkuta

総合スコア1260

ayachika

2019/03/18 21:58

NozomuIkuta様また同じようなミスで質問してしまいました。お答えいただきありがとうございました。表示することができました！JSONの見方ももう一度整理します。

NozomuIkuta

2019/03/19 14:09

解決したようで良かったです。ところで、３回ほど同じ原因で悩んだと言うことは、何かしら改善が必要のようですね。「JSONの見方ももう一度整理」するとのことですが、「JSONの見方」は改善のしようがないように思います。仮に「より注意深く見る」という意味であっても、「注意深く見る」ことを確実に実現する方法がありません。プログラミングなどのエンジニアリング（工学）分野は物事をより良くするためのものですが、「気をつけます」などの精神論ではなくて、「仕組み」で解決することが重要です。よければ、どうやって一連の処理を実装したか、教えていただけませんか？プロセスがわかれば、これ以上同じミスがないようするアイデアが出せるかもしれませんので。何回も同じことで悩むのは、精神衛生上よくないですしね。

ayachika

2019/03/20 15:53

NozommuIkuta様お返事が遅くなり申し訳ありません。昨日、本日と仕事が遅くなりチェックをしておりませんでした。改善は確実に必要です。まず、一連の実装ですが、ネット上のヒントになりそうなものをつぎはぎでコードの参考にしているということをやりました。JSONについては、基本的な形式はわかるものの、今回のように要素が多いと何がどこに属しているのかわからなくなり、今回のようなミスが発生しています。 Vue.jsの基本的なところはドキュメントで読むのですが、1歩踏み出すと全くわからなくなり、知識のパッチワークで対応するような状況になっています。お気遣いいただき本当にありがとうございます。

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