Nuxt，Strapi 无法获取媒体网址

Question

请你们检查我的代码并帮助我。 我已经将一些媒体上传到strapi，并将它们分配给每种饮料。现在我想用 axios 访问这些数据，我可以获取 id、描述、标题等，但我无法从媒体获取 URL。 任何人都可以帮忙。谢谢！

NUXT：

<v-img
  :src="'url(${http://localhost:1337}/drink.media.url)'"     
></v-img>
 


<script>
  async created() {
    try {
      const response = await axios.get("http://localhost:1337/drinks");
      this.drinks = response.data;
    } catch (error) {
      this.error = error;
    }
    console.log(this.drinks)
  },
  
};
</script>

来自邮递员的 JSON

[
    {
        "id": 2,
        "title": "Coca-Cola",
        "description": null,
        "price": 1,
        "published_at": "2021-10-16T19:02:52.099Z",
        "created_at": "2021-10-16T19:01:26.228Z",
        "updated_at": "2021-10-16T19:02:52.124Z",
        "unit": 250,
        "media": [
                "hash": "coca_cola_original_282x130_8baa6d1d20",
                "ext": ".webp",
                "mime": "image/webp",
                "size": 37.01,
                "url": "/uploads/coca_cola_original_282x130_8baa6d1d20.webp",
                "previewUrl": null,
                "provider": "local",
                "provider_metadata": null,
                "created_at": "2021-10-16T18:56:02.187Z",
                "updated_at": "2021-10-16T18:56:02.206Z"
            }
        ]
    },

谢谢！

Answer 1

我不知道你是如何在 Strapi 中上传图片的，但下面我将描述我在我的 Strapi 本地主机中上传书籍封面图片的方法，以及我在我的 nuxt 应用程序中访问图片的方式。也许在您的应用中使用它对您有帮助。

首先，我在我的strapi“内容类型构建器”部分创建了一个新的媒体字段，并将其命名为“bookCover”。之后，我将每本书的图片上传到数据库中。

其次，我在 Nuxt 应用程序中使用了 fetch() 而不是 created 挂钩。下面是我的 Nuxt 页面脚本的代码：

data() {
  return {
    books: [],
  }
},

async fetch() {
  this.books = await this.$axios.$get('http://localhost:1337/books');
}

最后根据Nuxt documentation我在我页面的模板部分使用了这段代码：

<div>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
<!-- you must enter your index of drinks, for example here I access the first book image -->
    <v-img max-width="250" :src="`http://localhost:1337${this.books[0].bookCover.url}`"></v-img>
  </div>
</div>

我认为，如果您使用此方法并使用“获取”挂钩并修改您在"v-img" 中调用src 属性的方式，您就可以访问您的图像。另请注意，我的变量名称与您的名称不同，您必须更改它们。