Nuxt，Strapi 无法获取媒体网址

Question

你们可以检查我的代码并帮助我吗?我上传了一些媒体到strapi并将它们分配到每种饮料中。现在我想用axios访问这些数据，我可以得到id, description, title等，但我不能从media中得到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 FROM POSTMAN

[
{
"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本地主机中上传书籍封面图像的方法，以及我在下一个应用程序中访问图像的方式。也许它对你在应用程序中使用它有帮助。

首先，我在strapi "content-types "创建了一个新的媒体字段。部分，并将其命名为"bookcover"。之后，我上传我的图像在数据库中的每本书。

第二次使用fetch()将替换为下面是我的next页面脚本的代码:

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

最后，根据next文档，我在我的模板中使用了这段代码我的部分页面:

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

我认为如果你使用这个方法并使用"fetch"hook并修改在"v-img"中调用src属性的方式，您可以访问您的图像。还要注意，我的变量名与你的变量名不同，你必须更改它们。