Strapi 图像未使用 Nuxt 在我的 _slug.vue 页面上呈现答案

【问题标题】：Strapi image not rendering on my _slug.vue page using NuxtStrapi 图像未使用 Nuxt 在我的 _slug.vue 页面上呈现
【发布时间】：2020-12-30 13:58:24
【问题描述】：

我似乎无法让我的strapi 图像在我的_slug.vue 页面上呈现。我能够在页面上呈现来自strapi 的标题和内容。当我取出图像代码时，页面呈现的文章标题和内容都很好。

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

【问题讨论】：

标签： vue.js nuxt.js strapi

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

对不起之前的答案（我在想别的地方）

这是你可以做的

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

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

并将其用作添加到图像的实际内容:src

【讨论】：