我熟悉使用断点来更改高度、宽度、字体大小等样式，但我很难找到根据屏幕大小更改图像的示例。
具体来说，我想根据屏幕大小用新图像替换图像。我的假设是，我希望将图像设置为自己的组件来启动。。。
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＝徽标+占位符"；
谢谢你的指示！
我发现了一种使用MUI组件在MUIv5上实现这一点的简单方法，但您必须使用图像元素的MUI-Box组件，这样才能访问sx道具。(他们在官方文档中使用Box作为图像示例，所以我认为这是推荐的(
其想法是，不使用"src"属性设置图像源，而是通过sx道具中的"content"CSS属性进行设置。通过这种方式，您可以在设置图像url:时轻松访问MUI主题断点
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
有几种方法可以实现这一点。例如，如果您的图像是背景，您可以像使用CSS断点更改任何其他CSS属性一样更改它。
但是，由于您在HTML中使用的是图像元素，您可以在javascript中观察窗口大小的变化，也可以使用HTML解决方案。
选项#1 Javascript：
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
这种方法有很多陷阱。如果没有正确实现，它可能会破坏性能，并且您需要计算出JS中正确元素的大小。
选项#2 srcset或图片元素和srcset
这是一种直接在HTML中构建响应图像的方法，它允许一个图像有多个文件路径。带有srcset的图像本身有点复杂(在链接中解释得更好(，所以我更喜欢<picture>元素。
在你的React组件中，你会有这样的东西：
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
这很酷，因为您可以拥有任意多的源行，每个源行都具有媒体查询样式条件。它们甚至可以是不同的文件类型，您可以像设置任何其他HTML元素属性一样动态地设置它们中的每一个。
唯一的问题是<picture>是一个HTML5元素，因此您需要针对较新的浏览器才能工作。