Loop images from strapi with 11ty - strapi

Question

I need your help!
I'm trying to fetch strapi data using 11ty following this guide:
https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/11ty.html#get-request-your-collection-type
I've handled with all data excepting images.
Fetching code:
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 code:
---
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 }}" alt="{{ work.data.title }}">
</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": [ ]
}
]
Thank you a lot!

Answer 1

Well, from what I understood, you need to render the images from the image key. To do this, you can just loop over the image array in articles and then access it's properties like below:
<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 }}" alt="{{ work.data.title }}">
</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>

Answer 2

There are 3 images so you need to get the right size instead of just {{article.image.url}}.
From my experience it's actually much better to transform such a "complex" api response to something much more suitable for template. You can do that in your data file. It's much easier to manipulate data in data file then inside template.