代码之家 › 专栏 › 技术社区 › Vida Khalili

如何在Nextjs中设置背景图像?

background-image material-ui next.js

Vida Khalili · 技术社区 · 2 年前

我在我的项目中使用Nextjs和Material Ui,设置背景图像并不像在其他项目中使用react那样有效。这是我第一次使用Nextjs。我试过导入 来自“下一个/图像”的图像 并使用 <Image height={} width={} /> 但它不像后台那样工作!如果您有任何关于与MUI在Nextjs中设置背景的信息,我将不胜感激。

1 回复 | 直到 2 年前

Muhamad Zolfaghari 2 年前

可以通过各种方法将图像作为背景图像导入NextJS页面,但在这种情况下,作为图像文件导入可能更合适。

import myImage from "../public/imageName.png";

下面是对象外观的示例。

{
    "src": "/_next/static/media/imageName.7f7cc385.png",
    "height": 7730,
    "width": 7730,
    "blurDataURL": "/_next/image?url=%2F_next%2Fstatic%2Fmedia%myImage.7f7cc385.png&w=8&q=70"
}

<Box
    height={789}
    width={1440}
    sx={{
      background: `url(${myImage.src}) center / cover`,
    }} 
/>

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

3 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

7 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

7 年前

Chris · 如何使用CSS缩放手机背景图像?

7 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

7 年前

Fahim Parkar · UITextView背景图像正在滚动多行

7 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

7 年前

AlphaX · 如何交换透明背景图像

7 年前

TJ1 · 更改圆的背景图像

7 年前