Seeking advice on displaying images from a gallery page sourced from Strapi. Previous methods have not been effective in my case.
My dynamic gallery page successfully retrieves collections from Strapi, but I'm struggling to showcase the images correctly.
I've retrieved all the details for my gallery, but I'm unsure how to utilize them with the v-for directive.
Here's how I fetch 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 is my attempt at displaying 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 perfectly on other pages. The issue seems to lie in how I'm handling the data. I can't retrieve any images, 'title', or 'description', although they are present in the API response.
Below is the sample API response:
[
{
"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": [
{
...
}
],
"cover_image": {
...
}
}
]