如何匹配数组键与容器宽度计算值输出对应尺寸图片URL

• 你的variantSizes为数组结构，每个元素对应原variants数组中单个资源的「尺寸-图片URL」映射对象，首先拿到你需要渲染的目标图片对应的映射对象
• JS原生支持方括号[]动态访问对象属性，直接将计算得到的output作为键传入即可获取对应URL
• 注意排查潜在问题：你当前预设的尺寸数组counts包含960，但生成variantSizes时没有配置960对应的URL字段，若reduce计算出output为960会取不到值，建议要么删除counts中的960，要么在GraphQL查询中补充960尺寸的资源字段。

完整实现代码 #

// 取目标图片对应的尺寸映射，这里以第一张图为例，可根据实际业务替换下标
const targetSizeMap = variantSizes[0];
// 动态匹配output对应的图片URL
const targetImgUrl = targetSizeMap[output];
// 赋值给页面主图src
const mainImg = document.querySelector("#你的主图元素选择器");
mainImg.src = targetImgUrl;

可选优化 #

如果希望避免小图放大出现模糊，可调整reduce逻辑，优先取大于等于容器宽度的最小尺寸：

const output = counts.reduce((prev, curr) => {
  // 优先保留大于等于目标宽度的尺寸
  if (curr >= goal && prev < goal) return curr;
  if (curr < goal && prev >= goal) return prev;
  // 都满足条件时取差值更小的
  return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
});

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