Image not rendering in _slug.vue

[marvthedev]

In my _slug.vue page, I can't seem to get the article image to render!

<template>
  <article class="article">
    <div class="article__container">
      <h1 class="article__title">{{ articles.title }}</h1>
      <img :src="api_url + articles.image.url" class="article__img" />
      <div
        class="article__content"
        v-html="$md.render(articles.content || 'No description provided')"
      ></div>
      <div class="article__side-bar"><p>Sidebar</p></div>
    </div>
  </article>
</template>

<script>
import articleQuery from "~/apollo/queries/article/Article";
export default {

  data: () => ({
    articles: {},
    api_url: process.env.strapiBaseUri
  }),
  apollo: {
    articles: {
      prefetch: true,
      query: articleQuery,
      variables() {
        return { slug: this.$route.params.slug };
      },
      update: data => data.articles[0]
    }
  }
};
</script>

[markkaylor]

Have you tried wrapping your image in a div with a v-if or putting a v-if on your img tag.

<div v-if="article.image.url">
  <img :src="api_url + articles.image.url" class="article__img" />
</div>

or see here for reference: https://github.com/strapi/strapi-starter-nuxt-blog/blob/master/frontend/pages/articles/_slug.vue

[nttdataxd]

I'm having the same problem. I tried the above, wrapping it in a div and I still receive the issue. It renders the very first time, but if I go back to the main page and click on the same article again it displays "Cannot read property 'url' of undefined"

[markkaylor]

Hi @nttdataxd and/or @marvthedev what database are you using?

[markkaylor]

I am able to reproduce the issue using mongodb. This a known bug that we are looking into here: https://github.com/strapi/strapi-template-blog/issues/5

Closing this, please follow that issue for updates.