Question

我似乎无法在我的_slug.vue页面上渲染我的bandi图像。我能够从页面上的stradi渲染标题和内容。当我取出图像代码时，页面的文章标题和内容就很好了。

    <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>


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

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

Answer 1

一种方法是在页面中使用head方法并在其中使用变量

您确实有权访问this，并且可以

head() {
  return: {
    title: this.title 
    meta: [
        { 
          hid: `${this.title}-page-description`,
          description: `${this.article.descriptioin}`
        },
     ...
    ]
  }
}

Answer 2

很抱歉以前的答案（我在想其他地方）

这就是你可以做的

创建一个计算属性，您可以在其中修改图像的实际URL

computed: {
   updatedArticleImage() {
    return this.articles.image.url.split('/uploads/').join('YOUR STRAPI URL/uploads/')
   }
}

并将其用作添加到图像:src

的实际内容

使用Nuxt无法在我的_slug.vue页面上呈现Strapi图像

2 个答案: