React/Nextjs中如何从图片URL提前提取宽高参数值

直接使用浏览器/Node.js原生支持的URL和URLSearchParams接口即可，无需引入任何第三方依赖，服务端/客户端环境都可直接运行。

封装复用版本（推荐） #

先封装通用工具函数，可全局复用：

const getImageSizeFromUrl = (imgUrl) => {
  try {
    const urlObj = new URL(imgUrl)
    const w = Number(urlObj.searchParams.get('w'))
    const h = Number(urlObj.searchParams.get('h'))
    // 可根据业务需求调整参数不存在时的默认兜底值
    return {
      width: isNaN(w) ? 400 : w,
      height: isNaN(h) ? 400 : h
    }
  } catch (err) {
    // URL格式非法时返回兜底值
    return { width: 400, height: 400 }
  }
}

组件内使用方式：

import Image from 'next/image'

function ImageRender({ image }) {
  const { width, height } = getImageSizeFromUrl(image.url)
  return <Image src={image.url} width={width} height={height} alt="logo" />
}

一次性极简版本 #

如果只需要单次使用，不需要复用，可以直接内联写：

import Image from 'next/image'

function ImageRender({ image }) {
  return (
    <Image 
      src={image.url}
      width={Number(new URL(image.url).searchParams.get('w')) || 400}
      height={Number(new URL(image.url).searchParams.get('h')) || 400}
      alt="logo"
    />
  )
}

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