如何通过动态键访问JavaScript嵌套对象获取响应式图片路径

问题原因 #

你当前的写法错误核心是：方括号语法访问对象属性时，传入的字符串不需要包含点语法的前缀.
你imageSizer返回的.mobile这类字符串，对应的键名实际是带.的字符串，和你对象里定义的mobile键完全不匹配，自然取不到值。

修正方案 #

第一步：修改imageSizer返回值，去掉前缀. #

const windowSizeInitial = window.innerWidth 

const imageSizer = (windowSize = windowSizeInitial) => {
    if(windowSize <= 600) {
      return "mobile"
    } else if (windowSize <= 1400) {
      return "tablet"
    } else {
      return "desktop"
    }
  } 

第二步：保持原有img标签写法即可正常取值 #

src={data ? `${process.env.PUBLIC_URL}${data[0].gallery.first[imageSizer()]}` : ""} alt="product" 

附加优化（可选） #

如果需要窗口尺寸变化时自动切换图片，仅监听初始宽度不满足需求，需要新增resize事件监听，以React框架为例的实现参考：

import { useState, useEffect } from 'react'

const ProductImage = ({data}) => {
  const [imgSize, setImgSize] = useState(imageSizer())

  useEffect(() => {
    const handleResize = () => setImgSize(imageSizer(window.innerWidth))
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <img 
      src={data ? `${process.env.PUBLIC_URL}${data[0].gallery.first[imgSize]}` : ""} 
      alt="product" 
    />
  )
}

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