使用 11ty 循环来自 strapi 的图像

Posted 2023-03-06

【中文标题】使用 11ty 循环来自 strapi 的图像

【英文标题】：Loop images from strapi with 11ty

【发布时间】：2021-11-13 15:49:29

【问题描述】：

我需要你的帮助！ 我正在尝试按照本指南使用 11ty 获取 Strapi 数据：https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/11ty.html#get-request-your-collection-type

我已经处理了除图像之外的所有数据。

获取代码：

const  default: axios  = require('axios');

module.exports = async () => 
  try 
    const res = await axios.get('http://localhost:1337/articles');
    return res.data;
   catch (error) 
    console.error(error);
  
;
 

11ty 代码：

---
title: Articles
layout: default.liquid
pagination:
  data: articles
  size: 100
  alias: articles
---

<div class="works content">
    <div class="container">
        <div class="works__items">
            %- for article in articles -%
            <div class="works__item">
                    <div class="works__image">
                        <img src=" article.image.url " >
                    </div>
                    <div class="works__content">
                        <div class="works__title">
                            <h3> article.title </h3>
                            <span>
                                 article.year 
                            </span>
                        </div>
                        <div class="works__description">
                            <p>article.content </p>
                        </div>
                    </div>
                </div>
            %- endfor -%
            </div>
        </div>
    </div>
</div>

json：

[

    
        "id": 1,
        "title": "My first article post",
        "content": "This is the first strapi post",
        "year": 2021,
        "users": null,
        "published_at": "2021-09-19T12:52:24.304Z",
        "created_at": "2021-09-19T12:10:38.253Z",
        "updated_at": "2021-09-19T17:39:17.072Z",
        "image": [
            
                "id": 4,
                "name": "steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                "alternativeText": "",
                "caption": "",
                "width": 1920,
                "height": 1287,
                "formats": 
                    "thumbnail": 
                        "name": "thumbnail_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "thumbnail_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 233,
                        "height": 156,
                        "size": 11.65,
                        "path": null,
                        "url": "/uploads/thumbnail_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    ,
                    "large": 
                        "name": "large_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "large_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 1000,
                        "height": 670,
                        "size": 221.22,
                        "path": null,
                        "url": "/uploads/large_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    ,
                    "medium": 
                        "name": "medium_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "medium_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 750,
                        "height": 503,
                        "size": 123.25,
                        "path": null,
                        "url": "/uploads/medium_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    ,
                    "small": 
                        "name": "small_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "small_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 500,
                        "height": 335,
                        "size": 54.99,
                        "path": null,
                        "url": "/uploads/small_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    
                ,
                "hash": "steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "size": 698.21,
                "url": "/uploads/steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg",
                "previewUrl": null,
                "provider": "local",
                "provider_metadata": null,
                "created_at": "2021-09-19T12:10:16.836Z",
                "updated_at": "2021-09-19T12:10:16.845Z"
            
        ]
    ,
    
        "id": 2,
        "title": "Second article",
        "content": "The second article",
        "year": 2001,
        "users": null,
        "published_at": "2021-09-19T17:36:34.649Z",
        "created_at": "2021-09-19T17:36:32.774Z",
        "updated_at": "2021-09-19T17:36:34.665Z",
        "image": [ ]
    ,
    
        "id": 3,
        "title": "Third article",
        "content": "Third article",
        "year": 2134,
        "users": null,
        "published_at": "2021-09-19T17:38:07.022Z",
        "created_at": "2021-09-19T17:38:05.706Z",
        "updated_at": "2021-09-19T17:38:07.036Z",
        "image": [ ]
    

]

非常感谢！

【参考方案1】：

嗯，据我了解，您需要从image 键渲染图像。为此，您只需遍历文章中的 image 数组，然后访问它的属性，如下所示：

<div class="works content">
    <div class="container">
        <div class="works__items">
            %- for article in articles -%
            <div class="works__item">
                   %- for image in article.image -%
                    <div class="works__image">
                        <img src=" image.url " >
                    </div>
                   %- endfor -%
                    <div class="works__content">
                        <div class="works__title">
                            <h3> article.title </h3>
                            <span>
                                 article.year 
                            </span>
                        </div>
                        <div class="works__description">
                            <p>article.content </p>
                        </div>
                    </div>
                </div>
            %- endfor -%
            </div>
        </div>
    </div>
</div>

【参考方案2】：

有 3 张图片，因此您需要获得正确的尺寸，而不仅仅是 article.image.url。

根据我的经验，将这样一个“复杂”的 api 响应转换为更适合模板的东西实际上要好得多。您可以在数据文件中执行此操作。在数据文件中操作数据比在模板中操作数据要容易得多。

【讨论】：

非常感谢！