将图像显示为索环盒中的背景

Question

我正在尝试使用 url 属性为 background 将 Box 的背景设置为本地图像，但它似乎没有生效.我创建了一个沙箱来展示这个问题。我在本地添加了一个 background.jpeg 图像，我将其设置为框上的背景，但背景图像未设置为背景。如果我将背景图像设置为某种颜色，比如“蓝色”，它就会生效。

如何将 Box 的背景设置为图像？

https://codesandbox.io/s/great-sun-tqmhb

Answer 1

您可以将 image 移动到 public 文件夹并像这样更改您的代码:-

import "./styles.css";
import { Grommet, Box } from "grommet";
export default function App() {
  return (
    <Grommet>
      <Box
        background="url('background.jpeg')"
        height="200px"
        width="200px"
        border={{ color: "brand", size: "large" }}
      />
    </Grommet>
  );
}

说明 : 您的 index.html 被提供的地方是您的应用程序的 base 路径（根据webpack 配置由 CRA 内部完成）。它是相对于此基本路径的，您可以针对检索 assets.

Codesandbox Link

将图像显示为索环盒中的背景

Show image as background in box in grommet

css

reactjs

grommet