使用11ty拉取Strapi数据时无法正常渲染图片该如何解决？

错误原因梳理 #

• 字段结构取值错误：从接口返回的JSON可以看出，article.image是数组类型，即使你在Strapi后台配置的是单图字段，默认也会返回数组结构，直接写article.image.url无法读取到正确的属性值
• 图片路径缺失域名：Strapi本地返回的图片url为相对路径，需要拼接Strapi服务的根地址才能正常访问
• 模板变量引用错误：<img>标签的alt属性使用了不存在的work.data.title变量，循环遍历的变量是article，此处应为article.title
• 未做空值兼容：部分文章的image字段为空数组，直接取值会导致模板渲染报错

修复方案 #

方案1：直接修改11ty模板（改动最小） #

把原有img标签部分替换为如下逻辑，先判断数组是否为空，再取第一个元素的url并拼接域名：

{% if article.image and article.image.length > 0 %}
<img src="http://localhost:1337{{ article.image[0].url }}" alt="{{ article.title }}">
{% endif %}

如果需要用指定尺寸的缩略图，也可以读取formats里对应规格的url：

<!-- 例如取小尺寸缩略图 -->
<img src="http://localhost:1337{{ article.image[0].formats.small.url }}" alt="{{ article.title }}">

方案2：在数据拉取阶段预处理（适合多模板复用场景） #

修改你的数据拉取代码，提前把图片路径处理好，模板里可以直接调用：

const { default: axios } = require('axios');
const STRAPI_HOST = 'http://localhost:1337';

module.exports = async () => {
  try {
    const res = await axios.get(`${STRAPI_HOST}/articles`);
    // 预处理数据，补全图片路径
    return res.data.map(article => {
      if (article.image && article.image.length) {
        // 把第一张图的全路径挂载到cover字段，模板直接用article.cover即可
        article.cover = `${STRAPI_HOST}${article.image[0].url}`;
        // 也可以按需处理其他规格的图片字段
      }
      return article;
    });
  } catch (error) {
    console.error(error);
  }
};

处理后模板里可以直接写：

{% if article.cover %}
<img src="{{ article.cover }}" alt="{{ article.title }}">
{% endif %}

内容的提问来源于stack exchange，提问作者Vitalii