css - 在索环中的框中显示图像作为背景

Question

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

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

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

Answer 1

您可以将图像移动到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：为您提供服务的地方是您的应用程序的基本路径（根据 CRA 内部完成的 webpack 配置）。它与您可以针对检索assets的基本路径相关。

代码沙盒链接