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：无法读取属性＆＃39; 0＆＃39;未定义的



server-bundle.js：1525 filtered.data.data.map.item   服务器bundle.js：1525：56



Array.map



server-bundle.js：1519＆gt; __ WEBPACK_IMPORTED_MODULE_1_axios ___ default.a.get.then .response   服务器bundle.js：1519：24



next_tick.js：160 process._tickCallback   内部/过程/ next_tick.js：160：7

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

Answer 1

最后，我没有使用＆＃34; _embed＆＃34;但我在这个答案之后添加了一个新的终点：Get Image URL instead of Attachment Id in Rest API

Answer 2

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

因此它将是request.get(个帖子？categories = 46＆per_page = 6＆_embed )

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

Answer 3

问题有时是item._embedded['wp:featuredmedia']返回undefined，您可以通过console.log(item._embedded['wp:featuredmedia'])确认是否可以解决此问题，方法是将其包装在if条件中（如果未定义继续） if(item._embedded['wp:featuredmedia']){ return let imageUrl = item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url } else { return null}

Answer 4

我有一篇帖子给出了此错误。我正确地设置了if / else，但是仍然出错。我去了问题文章并重新修复了特色图片，还更改为ajax来加载.full.source_url而不是.medium.source_url，从而修复了错误。

Answer 5

我从另一个wordpress导入了一些照片。其中一些没有特色图片，但以某种方式表现得像。（has_post_thumbnail（）的行为相同，并针对该帖子返回true）

我的解决方案是检查他们是否“真的”拥有缩略图：

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＆＃39;未定义的

5 个答案: