将图像显示为扣眼中框中的背景

问题描述

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

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

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

解决方法

您可以将您的图片移动到 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 配置）。它是相对于您可以定位检索资产的基本路径。

Codesandbox Link