如何从 javascript 中的 API 中提取图像 ID？答案

【问题标题】：How can I extract image id from an API in javascript?如何从 javascript 中的 API 中提取图像 ID？
【发布时间】：2021-12-04 19:38:51
【问题描述】：

所以我有一个使用 Google Books API 的应用程序，并且我有一个带有图像海报的 div。因此，我需要从 Google API 中的图像 url 获取图像 id，以更改这些 div 中书籍的海报。

Javascript 代码：

const IMG_URL = "http://books.google.com/books/content?id="; //after "id=" I need to insert a particular image id

图书展示功能：

function showBooks(data){

    data.forEach(book => {
        const {title, authors, description} = book;
        const bookEl = document.createElement('div');
        bookEl.classList.add('book');

        bookEl.innerHTML = `
        <div class="border"></div>
        <img src="${IMG_URL + }">   //here I should concatenate url with book id
<div class="book_info">
        <h3>Book title</h3>
        <p>Author</p>
</div>
<div class="overview">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi augue, ultricies vitae nisi vitae, 
            suscipit elementum risus. Suspendisse vitae porta tellus, a finibus lorem. </p>
</div>
        
        
        
        `
    });
}

它在 API 中的样子：

"thumbnail": "http://books.google.com/books/content?id=WvfgAAAAMAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"

【问题讨论】：

你真正想要实现什么？要从此 URL http://books.google.com/books/content?id=WvfgAAAAMAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api 获取 WvfgAAAAMAAJ 吗？
@Reflective。不，我的应用程序是通过输入书名来搜索书籍，因此 div 中的内容应该改变，以及书籍海报，这就是为什么我想提取图像 id 以切换到正在搜索的书籍的任何 id

标签： javascript google-cloud-platform

【解决方案1】：

我会构造一个 URL 对象，然后提取 id 参数

const url = new URL(yourImageUrl)
const id = url.searchParams.get("id")

在此处阅读有关 URL 类的更多信息：https://developer.mozilla.org/de/docs/Web/API/URL

【讨论】：