WP API 和 JS：无法读取未定义的属性 'wp:featuredmedia'

Question

我编写了一个组件来在使用 nuxt.js 构建的页面上显示 WP 帖子列表，但我无法显示特色图片。

Vue 组件

<template>
  <div class="references__grid">
    <div class="references__item" v-for="item in references">
        <h3><nuxt-link :to="slugToUrl(item.slug)"><h2 class="is-title">{{ item.title }}</h2></nuxt-link></h3>
        <div v-html="item.excerpt"></div>
        <div>{{ item.image }}</div>
        <strong class="more"><nuxt-link :to="slugToUrl(item.slug)">Lire la suite</nuxt-link></strong>
    </div>
  </div>
</template>

请求

  getReferences() {
    return new Promise((resolve, reject) => {
      request.defaults.baseURL = this.baseUrl;
      request.get(`posts?categories=46&per_page=6&_embedded`).then(response => {
        const data = [...response.data];
        if (response.status === 200 && response.data.length > 0) {
          const filtered = {
            total: response.headers["x-wp-total"],
            totalPages: response.headers["x-wp-totalpages"],
            data: data.map(item => ({
              id: item.id,
              title: item.title.rendered,
              content: item.content.rendered,
              excerpt: item.excerpt.rendered,
              slug: item.slug,
              image: item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url
            }))
          };
          resolve(filtered);
        } else {
          reject(response);
        }
      });
    });
  },

WP Api 似乎没问题：https://www.agencedebord.com/wp-json/wp/v2/posts?categories=46&per_page=61&_embed

错误信息：

ERROR

TypeError: Cannot read property '0' of undefined

server-bundle.js:1525 filtered.data.data.map.item server-bundle.js:1525:56

Array.map

server-bundle.js:1519 >__WEBPACK_IMPORTED_MODULE_1_axios___default.a.get.then .response server-bundle.js:1519:24

next_tick.js:160 process._tickCallback internal/process/next_tick.js:160:7

那么为什么 item._embedded 是未定义的？ item.id 或 item.slug 没有问题...任何澄清表示赞赏。

Answer 1

最后，我没有使用“_embed”，但我在这个答案之后添加了一个新端点：Get Image URL instead of Attachment Id in Rest API

Answer 2

我认为请求 url 不正确，您应该使用 _embed 而不是 _embedded

所以它将是 request.get(posts?categories=46&per_page=6&_embed)

否则，json 响应中将缺少 _embedded 部分。

Answer 3

问题是有时 item._embedded['wp:featuredmedia'] 返回 undefined，你可以通过 console.log(item._embedded['wp:featuredmedia']) 确认你得到了它，解决方案是将它包装在 if 条件中，如果它不是 undefined继续 if(item._embedded['wp:featuredmedia']){ return let imageUrl = item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url } else { return null}

Answer 4

我有一个 post 出现了这个错误。我已经正确设置了 if/else 但它仍然出错。我解决了问题 post 并重新保存了特色图片，还更改为 ajax 以加载 .full.source_url 而不是 .medium.source_url 并修复了错误。

Answer 5

我从另一个wordpress导入了一些照片。他们中的一些人没有特色图片，但他们以某种方式表现得像他们一样。（has_post_thumbnail() 以同样的方式行事并且 returns 对于该帖子是正确的）

我的解决方案是检查它们 'really' 是否有缩略图：

if(post.featured_media == 0 || post._embedded['wp:featuredmedia'][0].media_details == undefined){
    imageSource = null;
}
else{
    imageSource = post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url;
}

WP API 和 JS：无法读取未定义的属性 'wp:featuredmedia'

WP API and JS : Cannot read property 'wp:featuredmedia' of undefined

wordpress

wp-api

WP API 和 JS：无法读取未定义的 属性 'wp:featuredmedia'

WP API and JS : Cannot read property 'wp:featuredmedia' of undefined

wordpress

wp-api

WP API 和 JS：无法读取未定义的属性 'wp:featuredmedia'