我很熟悉使用断点来更改高度、宽度、字体大小等样式,但我找不到根据屏幕大小更改图像的示例。
具体来说,我想根据屏幕尺寸用新图像替换图像。我的假设是我希望将图像设置为它自己的组件来启动...
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= Logo +占位符"
感谢任何指导!
最佳答案
我找到了一种使用 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 - Material-UI根据断点改变IMG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64993101/