如何使用next和Strapi显示图像库?

Question

我知道这是一个类似的问题，但前面的解决方案对我来说都不成功。

我有一个画廊页面，可以很好地从Strapi获取集合，打开一个动态页面，但我无法管理如何在那里显示图像。

我打电话给我的画廊，得到所有的细节，但IDK如何以正确的方式显示它在v-for

这是我如何调用特定的画廊(_slug.vue页)

async asyncData({ $strapi, params }) {
const gallery = await $strapi.find("galleries", {
slug: params.slug
});
console.log(gallery);
return {
gallery
};
},

这里我想显示它

<h2 class="text-2xl font-normal text-gray-600 mt-12 mb-3">{{ gallery.title }}</h2>
<p class="mb-10 text-lg font-light text-gray-700">{{ gallery.description }}</p>
<div class="inline-flex flex-wrap">
<div v-for="item of gallery" class="w-full md:w-1/2 lg:w-1/3 xl:1/4 p-4">
<img
class="w-full h-96 object-cover rounded transition ease-in-out transform hover:-translate-y-1 hover:shadow-xl hover"
:src="$config.strapiUrl + item.gallery.images[0].url"
alt=""
/>
</div>
</div>

$config.strapiUrlURL变量在所有其他页面上运行良好。我认为问题不在于这个，而在于我怎么打电话或不打电话。我没有得到任何图像，title也没有description，但它们在API响应上。

我得到的API响应是

[
{
"id": 6,
"title": "Gallery 2",
"description": "Description here",
"published_at": "2021-10-23T20:47:50.752Z",
"created_at": "2021-10-23T20:47:46.503Z",
"updated_at": "2021-10-23T20:53:51.527Z",
"slug": "gallery-2",
"images": [
{
"id": 169,
"name": "002_01.jpg",
"alternativeText": "",
"caption": "",
"width": 1600,
"height": 1066,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_002_01_6943cf5aac.jpg",
"hash": "large_002_01_6943cf5aac",
"mime": "image/jpeg",
"name": "large_002_01.jpg",
"path": null,
"size": 74.3,
"width": 1000,
"height": 666
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_002_01_6943cf5aac.jpg",
"hash": "small_002_01_6943cf5aac",
"mime": "image/jpeg",
"name": "small_002_01.jpg",
"path": null,
"size": 25.5,
"width": 500,
"height": 333
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_002_01_6943cf5aac.jpg",
"hash": "medium_002_01_6943cf5aac",
"mime": "image/jpeg",
"name": "medium_002_01.jpg",
"path": null,
"size": 46.64,
"width": 750,
"height": 500
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_002_01_6943cf5aac.jpg",
"hash": "thumbnail_002_01_6943cf5aac",
"mime": "image/jpeg",
"name": "thumbnail_002_01.jpg",
"path": null,
"size": 8.53,
"width": 234,
"height": 156
}
},
"hash": "002_01_6943cf5aac",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 164.23,
"url": "/uploads/002_01_6943cf5aac.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-10-23T18:37:15.745Z",
"updated_at": "2021-10-23T18:37:15.842Z"
},
{
"id": 178,
"name": "002_02.jpg",
"alternativeText": "",
"caption": "",
"width": 1600,
"height": 1066,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_002_02_32ff961c52.jpg",
"hash": "large_002_02_32ff961c52",
"mime": "image/jpeg",
"name": "large_002_02.jpg",
"path": null,
"size": 117.43,
"width": 1000,
"height": 666
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_002_02_32ff961c52.jpg",
"hash": "small_002_02_32ff961c52",
"mime": "image/jpeg",
"name": "small_002_02.jpg",
"path": null,
"size": 33.45,
"width": 500,
"height": 333
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_002_02_32ff961c52.jpg",
"hash": "medium_002_02_32ff961c52",
"mime": "image/jpeg",
"name": "medium_002_02.jpg",
"path": null,
"size": 68.17,
"width": 750,
"height": 500
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_002_02_32ff961c52.jpg",
"hash": "thumbnail_002_02_32ff961c52",
"mime": "image/jpeg",
"name": "thumbnail_002_02.jpg",
"path": null,
"size": 8.68,
"width": 234,
"height": 156
}
},
"hash": "002_02_32ff961c52",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 247.96,
"url": "/uploads/002_02_32ff961c52.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-10-23T18:37:20.647Z",
"updated_at": "2021-10-23T18:37:20.850Z"
},
{
"id": 183,
"name": "002_04.jpg",
"alternativeText": "",
"caption": "",
"width": 1600,
"height": 1066,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_002_04_863abe8b86.jpg",
"hash": "large_002_04_863abe8b86",
"mime": "image/jpeg",
"name": "large_002_04.jpg",
"path": null,
"size": 122.13,
"width": 1000,
"height": 666
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_002_04_863abe8b86.jpg",
"hash": "small_002_04_863abe8b86",
"mime": "image/jpeg",
"name": "small_002_04.jpg",
"path": null,
"size": 32.98,
"width": 500,
"height": 333
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_002_04_863abe8b86.jpg",
"hash": "medium_002_04_863abe8b86",
"mime": "image/jpeg",
"name": "medium_002_04.jpg",
"path": null,
"size": 68.82,
"width": 750,
"height": 500
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_002_04_863abe8b86.jpg",
"hash": "thumbnail_002_04_863abe8b86",
"mime": "image/jpeg",
"name": "thumbnail_002_04.jpg",
"path": null,
"size": 8.61,
"width": 234,
"height": 156
}
},
"hash": "002_04_863abe8b86",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 280.6,
"url": "/uploads/002_04_863abe8b86.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-10-23T18:37:22.628Z",
"updated_at": "2021-10-23T18:37:22.931Z"
}
],
"cover_image": {
"id": 167,
"name": "002_10.jpg",
"alternativeText": "",
"caption": "",
"width": 1600,
"height": 1066,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_002_10_b20570c2ca.jpg",
"hash": "large_002_10_b20570c2ca",
"mime": "image/jpeg",
"name": "large_002_10.jpg",
"path": null,
"size": 59.87,
"width": 1000,
"height": 666
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_002_10_b20570c2ca.jpg",
"hash": "small_002_10_b20570c2ca",
"mime": "image/jpeg",
"name": "small_002_10.jpg",
"path": null,
"size": 20.34,
"width": 500,
"height": 333
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_002_10_b20570c2ca.jpg",
"hash": "medium_002_10_b20570c2ca",
"mime": "image/jpeg",
"name": "medium_002_10.jpg",
"path": null,
"size": 37.45,
"width": 750,
"height": 500
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_002_10_b20570c2ca.jpg",
"hash": "thumbnail_002_10_b20570c2ca",
"mime": "image/jpeg",
"name": "thumbnail_002_10.jpg",
"path": null,
"size": 6.71,
"width": 234,
"height": 156
}
},
"hash": "002_10_b20570c2ca",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 130.19,
"url": "/uploads/002_10_b20570c2ca.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-10-23T18:37:13.658Z",
"updated_at": "2021-10-23T18:37:13.941Z"
}
}

)

Answer 1

好吧，我是这样解决的:

当Strapi依赖于ID

时，我在函数上调用了错误的对象。第一步是修改findOne函数，让它得到的是slug，而不是视频中的ID

https://www.youtube.com/watch?v=gtvXiRqn0ZI

和这段代码:

const { sanitizeEntity } = require('strapi-utils');
module.exports = {
/**
* Retrieve a record.
*
* @return {Object}
*/
async findOne(ctx) {
const { slug } = ctx.params;
const entity = await strapi.services.restaurant.findOne({ slug });
return sanitizeEntity(entity, { model: strapi.models.restaurant });
},
};

然后我开始得到title和description的正确数据。

next的v-for被更新为:

v-for='image of gallery.images'

和image标签:

<img class="w-full h-96 object-cover rounded transition ease-in-out transform hover:-translate-y-1 hover:shadow-xl hover" :src="$config.strapiUrl + image.url" alt="" />`

感谢Strapi - Discord的@IAmRoot，他也帮助了我。