エラーundefinedの回避方法

Question

前提・実現したいこと

google bools apiを用いた本の検索と気になる（保管）機能の実装したサイトの制作

発生している問題・エラーメッセージ

thumbnailというプロパティの親がundefinedになっている

エラーメッセージ
Error in render: "TypeError: Cannot read property 'thumbnail' of undefined"

該当のソースコード

HTML

<div class="book_wrapper">
            <div class="book_card" v-for="item in items">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />
                </div>

Javascript

const vm = new Vue({
  el: '#app',
  data() {
    return{
      query:'',
      items:[], //#apiから取得したデータを格納
    };
  },
  methods:{
    getResult(query){
      axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => {
        console.log(response.data);
        this.items = response.data.items;
       
       const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail;
       if(typeof bookDate == "undefined") {
         console.log("未定義です。");
       }
      });
    },
    
    addFavorite(setId,setTitle) {
      //気になるボタンの本のIDとtitleを取得する
      let setData = {
        id    : setId,
        title : setTitle
      };
      //IDとtitleをfirebaseに登録する
      firebase
        .database()
        .ref('my-key')
        .push(setData);
       
        // idとtitleを取得 
       const booksFav = firebase
        .database()
        .ref('my-key')
        .orderByChild('setData');
　　　
  　　　　// item の child_addedイベントハンドラを登録
    　　// （データベースに書籍が追加保存されたときの処理）
        booksFav.on('child_added', (item) => {
          const FavData = item.val();
      
      
    });
    },
     
    
  }
});

試したこと

const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail;
if(typeof bookDate == "undefined") {
console.log("未定義です。");
}

補足情報（FW/ツールのバージョンなど）

上記において、エラーの改善策を教えていただけると助かります。
よろしくお願いいたします。

Answer 1

thumbnailというプロパティの親がundefinedになっている

エラーメッセージが出ているのはここの部分でしょうか？

<img class="card-img" v-bind:src="item.volumeInfo.imageLinks.thumbnail" />

thumbnail の親なので、imageLinks が undefined ということだと思います。
JavaScript のソースでおこなっているように ?. を使って参照してみてはどうでしょうか。

<img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />