Material-UI基于断点改变IMG

Question

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

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

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=徽标+占位符"

感谢您的任何指示！

Answer 1

我找到了一种使用 MUI 组件在 MUIv5 上执行此操作的简单方法，但您必须对图像元素使用 MUI Box 组件，以便可以访问 sx 属性。（他们在官方文档中使用 Box 作为图像示例，所以我认为无论如何还是推荐它）

这个想法是，您可以通过 sx 属性中的“content”CSS 属性来设置图像源，而不是使用“src”属性设置图像源。这样你就可以在设置图片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"
/>