如何从 GraphQL WP 无头查询获取缩略图

Question

如何使用 WPGraphQL Headless 从帖子查询中获取缩略图而不是特征图像？

我可以看到，您可以很容易地获得特色图像，然后它具有用于较小尺寸的不同图像的 srcSets，但没有明确的选项可以为我提供帖子缩略图。

我想要获得缩略图而不是特色图像的原因是因为性能。

Answer 1

刚刚遇到了同样的问题，并用一行代码破解了它，该行从图像的原始 sourceUrl 返回缩略图 URL：

 const thumbnailUrl = (srcUrl) => {
    if (!srcUrl) return;
    return srcUrl.split('.').slice(0,-1).join('.') + "-150x150." + srcUrl.split('.').pop();
  }

由于它为尺寸变体添加了固定字符串，因此它仅适用于固定/裁剪的图像尺寸，例如缩略图。

Answer 2

如果它可以帮助某人，我的 srcset 在 GQL 答案中为空，因此它无法按预期工作。

我使用“mediaDetails”获取 wp 缩略图，如下所示：

featuredImage {
            node {
                altText
                mediaDetails {
                    sizes {
                        name
                        sourceUrl
                    }
                }
            }
        }