小编cwr*_*r__的帖子

我熟悉使用断点来更改高度、宽度、字体大小等样式，但我无法找到根据屏幕尺寸更改图像的示例。

具体来说，我想根据屏幕尺寸用新图像替换图像。我的假设是我希望将图像设置为自己的组件来启动......

import  React from "react";

export default function ResponsiveLogo() {

  return(
    <div>
      <img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder" 
       alt="logo placeholder"/>
    </div>
  )

}

我相信我应该使用 useMediaQuery 来处理这个问题，但不确定语法。由于我在寻找在一个断点处执行此操作的示例之前没有使用过 useMediaQuery，因此我知道如何继续。

举个例子，假设我们想要更改任何小于 Material-UI 的“sm”断点（600px）的屏幕的图像，并且我们想要交换此图像：“https://dummyimage.com/200x200/4169e1/fff。 png&text=徽标+占位符"

感谢您的任何指示！