如何使用 Nuxt 和 Strapi 显示图片库？
How to display an image gallery with Nuxt and Strapi?
我知道这是一个与这里其他人类似的问题，但是 none 之前的解决方案对我来说是成功的。
我有一个画廊页面，可以很好地从 Strapi 获取 collections，打开一个动态页面，但我无法管理如何在那里显示图像。
我正在打电话给我的画廊并获取所有详细信息，但不知道如何在 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.strapiUrl URL 变量适用于所有其他页面。我不认为问题在于此，但我 calling/or 没有打电话。我没有收到任何图像，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"
}
}
]
好的，我是这样解决的：
当 Strapi 依赖于 ID 时，我在函数上调用 slug 时得到了错误的对象
第一步是更改 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 的正确数据。
在 Nuxt 方面，v-for 更新为：
v-for='image of gallery.images'
图片标签：
<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 的 @IAmRoot - Discord 也在这方面帮助了我。
我知道这是一个与这里其他人类似的问题，但是 none 之前的解决方案对我来说是成功的。
我有一个画廊页面，可以很好地从 Strapi 获取 collections，打开一个动态页面，但我无法管理如何在那里显示图像。
我正在打电话给我的画廊并获取所有详细信息，但不知道如何在 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.strapiUrl URL 变量适用于所有其他页面。我不认为问题在于此，但我 calling/or 没有打电话。我没有收到任何图像，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"
}
}
]
好的，我是这样解决的：
当 Strapi 依赖于 ID 时，我在函数上调用 slug 时得到了错误的对象
第一步是更改 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 的正确数据。
在 Nuxt 方面，v-for 更新为：
v-for='image of gallery.images'
图片标签：
<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 的 @IAmRoot - Discord 也在这方面帮助了我。