尝试使用 javascript 从 WP API Json 数据中获取产品特色图片

Question

请问我是 API 新手，如何使用 javascript 从 WP API Json 数据中将产品特色图片提取到我的自定义 HTML 页面中？以下是我所做的，但特色图片拒绝显示，如果有更好的方法，我想知道。

const url = 'https://example.com/wp-json/wp/v2/product?filter[categories]=dishes&media';
    
    const postsContainer = document.querySelector('.product_title');

    fetch(url)
    .then(response => response.json())
    .then(data => 
        {
            data.map( product => {
                const innerContent = 
                `
                 <div class="ltabs-item product-layout">
                                            <div class="product-item-container">
                                                <div class="left-block">
                                                    <div class="product-image-container second_img ">
                                                        <img src="product._link.wp:featuredmedia.0.href.source_url"  alt="featured image 30" class="img-responsive" />
                                                        <img src="image/demo/shop/resize/J5-270x270.jpg"  alt="Apple Cinema 30&quot;" class="img_0 img-responsive" />
                                                    </div>
                                                    <!--Sale Label-->
                                                    <span class="label label-sale   ">-15%</span>
                                                    <!--full quick view block-->
                                                    <a class="quickview iframe-link visible-lg" data-fancybox-type="iframe"  href="quickview .html">  Quickview</a>
                                                    <!--end full quick view block-->
                                                </div>
                                                <div class="right-block">
                                                    <div class="caption">
                                                        <h4>${product.title.rendered}</h4>      
                                                        <div class="ratings">
                                                            <div class="rating-box">
                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                            </div>
                                                        </div>
                                                                            
                                                        <div class="price">
                                                            <span class="price-new">$50.00</span> 
                                                            <span class="price-old">$62.00</span>        
                                                        </div>
                                                    </div>
                                                    
                                                      <div class="button-group">
                                                        <button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');"><i class="fa fa-shopping-cart"></i> <span class="">Add to Cart</span></button>
                                                        <button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
                                                        <button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button>
                                                      </div>
                                                </div><!-- right block -->
                                            </div>
                                        </div>

                `
                postsContainer.innerHTML += innerContent;
            })
        }
    );```

Answer 1

几点：

您已将您的 postsContainer 变量设置为一个常量，它应该不会被进一步更改。这可能是你的问题。尝试使用 let 或 var 进行设置。

let postsContainer = document.querySelector('.product_title');

通过测试代码更逐步地完成脚本，以便您了解故障所在。

1. console.log() 数据响应，以确保您连接到 API 并获得包含产品对象的响应。

console.log('data: ', data);

1. console.log() 在循环中逐步返回数据，直到您确定您拥有 URL。

console.log('product: ', product);
console.log('product: ', product._link);
etc