简体   繁体   中英

Nuxt with storyblok not rending image

Hei, I am doing a blog with Nuxt and storyblock as CMS. First time using both. Everything works but the image doesn't render showing the error:

GET http://localhost:3000/undefined 500 (NuxtServerError) 2commons.app.js:11367 [Vue warn]: Invalid prop: type check failed for prop "thumbnailImage". Expected String with value "undefined", got Undefined

found in

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

But if I go to the console and see the data in each post, the thumbnail is there and the link works. Can someone guide me here? Thank you

So in my 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>

and then

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
            };
          })
        };
      });
  }

在此处输入图片说明

Found it.In the key values of the storyblok, Thumbnail as also Summary start with Capital letter and I didn't had that on the index.vue page.

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM