带有故事块的 Nuxt 不渲染图像答案

【问题标题】：Nuxt with storyblok not rending image带有故事块的 Nuxt 不渲染图像
【发布时间】：2019-06-20 22:14:21
【问题描述】：

嘿，我正在用 Nuxt 和 storyblock 作为 CMS 做一个博客。第一次使用两者。一切正常，但图像未呈现显示错误：

GET http://localhost:3000/undefined 500 (NuxtServerError) 2commons.app.js:11367 [Vue 警告]：无效的道具：道具“thumbnailImage”的类型检查失败。预期值为“未定义”的字符串，得到未定义

发现于

<PostPreview> at components/Blog/PostPreview.vue
  <Pages/index.vue> at pages/index.vue
    <Nuxt>
      <Default> at layouts/default.vue
        <Root>

但是如果我去控制台查看每个帖子中的数据，缩略图就在那里并且链接有效。有人可以在这里指导我吗？谢谢

所以在我的 index.vue 中：

<template>
  <section id="posts">
    <postPreview
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
      :excerpt="post.previewText"
      :thumbnailImage="post.thumbnailUrl"
      :id="post.id"
    />
  </section>
</template>

然后

asyncData(context) {
    return context.app.$storyapi
      .get('cdn/stories', {
        version: 'draft',
        starts_with: 'blog/'
      })
      .then(res => {
        console.log(res)
        return {
          posts: res.data.stories.map(bp => {
            return {
              id: bp.slug,
              title: bp.content.title,
              previewText: bp.content.summary,
              thumbnailUrl: bp.content.thumbnail
            };
          })
        };
      });
  }

【问题讨论】：

标签： javascript vue.js nuxt.js storyblok

【解决方案1】：

找到了。在storyblok的关键值中，缩略图和摘要都以大写字母开头，而我在index.vue页面上没有。

【讨论】：