I know it's a similar question to others here but none of the previous solutions were successful for me.
I have a gallery page that works well getting the collections from Strapi, opening a dynamic page but I can't manage how to show the images there.
I'm calling my gallery and getting all the details but IDK how to show it in the correct way on the v-for
Here's how I'm calling the specific gallery (_slug.vue page)
async asyncData({ $strapi, params }) {
const gallery = await $strapi.find("galleries", {
slug: params.slug
});
console.log(gallery);
return {
gallery
};
},
And here how I'm I'm trying to display it
<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>
The $config.strapiUrl URL variable works well on all other pages. I don't believe the issue is with that but how I'm calling/or not calling. I'm not getting any images, title nor description but they are on the API response.
API Response I'm getting is
[
{
"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"
}
}
]
Okay, Here's how I solved it:
I was getting the wrong object calling slug on the function when the Strapi relies on the ID
The first step was changing the findOne function to get the slug and not the ID following this video here
https://www.youtube.com/watch?v=gtvXiRqn0ZI
with this piece of code:
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 });
},
};
Then I started to get the correct data for the title and description.
On the Nuxt side the v-for was updated to:
v-for='image of gallery.images'
And the image tag:
<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="" />`
Thanks to @IAmRoot from Strapi - Discord who helped me on that too.