1

我知道这与这里的其他人有类似的问题，但以前的解决方案对我来说都没有成功。

我有一个画廊页面，可以很好地从 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"
    }
}

]

4

1 回答 1

0

好的，这是我解决它的方法：

当 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 });
  },
};

然后我开始为titleand获取正确的数据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 在这方面也为我提供了帮助。

于 2021-10-24T06:58:51.083 回答