首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google Books API:无法读取未定义的属性“”thumbnail“”

Google Books API:无法读取未定义的属性“”thumbnail“”
EN

Stack Overflow用户
提问于 2018-08-05 15:29:59
回答 1查看 1.8K关注 0票数 1

我正在做一个简单的项目,使用谷歌图书API,遇到以下错误:无法读取属性‘缩略图’的未定义。似乎,对于某些查询,没有图像或路径。例如,对于图书查询,它工作正常,并显示相关的图书。

而对于大型查询,它会抛出一个错误。

据我所知,Google books API for sme图书中没有图书封面,这就是它抛出这个错误的原因。我正在尝试通过lodash库,即_set function来修复它。

代码语言:javascript
复制
document.querySelector('.search-book').addEventListener('click', getBook);
var titleHolder = document.querySelector('.title');
var columns = document.querySelector('.is-parent');
var total = '';
const apiKey = 'AIzaSyCu0GO52L8knIMQ7P_gmazBf_7wlngXqyc';

function getBook() {
  var search = document.querySelector('#input').value;
  console.log(search);
  fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${search}:keyes&key=${apiKey}`
  )
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      //console.log(data.items);
      let items = data.items;
      for (var i = 0; i < items.length; i++) {
        // Volume info
        let item = items[i].volumeInfo;

        // Author
        let author = item.authors;

        // Image link
        var imgLink = item.imageLinks.thumbnail;

        // Title
        let title = item.title;

        // Description
        let desc = item.description;

        if (typeof desc === 'undefined') {
          desc = 'No description available';
        }

        if (typeof author === 'undefined') {
          author = 'No author';
        }

        if (!item.imageLinks.firstChild) {
          _.set(
            item,
            'item.imageLinks',
            'thumbnail:https://bulma.io/images/placeholders/128x128.png'
          );
          console.log(data);
        }

        total += `
        <div class=" card tile is-child is-3 box">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="${imgLink}" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-6 has-text-primary has-text-centered is-capitalized">${title}</p>
            <p class="title is-6 has-text-primary has-text-centered is-capitalized">${author}</p>
            <p class="has-text-black-ter has-text-weight-normal">${desc.slice(
              0,
              150
            ) + '...'}</p>
          </div>
        </div>
        `;

        console.log(item);
      }
      columns.innerHTML = total;
    });
}

首先我检查object中是否有缩略图属性,如果没有这样的属性,我使用lodash _set函数用占位符替换缺少的图像,但不起作用。请帮我解决这个问题。要么使用loadsh函数,要么给我提供另一种解决方法。

代码语言:javascript
复制
if (!item.imageLinks.firstChild) {
              _.set(
                item,
                'item.imageLinks',
                'thumbnail:https://bulma.io/images/placeholders/128x128.png'
              );
              console.log(data);
            }
EN

回答 1

Stack Overflow用户

发布于 2019-04-16 03:35:05

我花了太多时间来解决这个问题。

这就是我怎么做的,现在它不会抛出任何错误,最后

代码语言:javascript
复制
src={
      book.volumeInfo.imageLinks === undefined
        ? ""
        : `${book.volumeInfo.imageLinks.thumbnail}`
  }
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51692323

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档