使用 React 内联样式设置背景图像

1. 在 React 中使用内联样式设置背景图像
2. 在 React 中使用内联样式将本 Map 像设置为背景

在构建复杂的 Web 应用程序时，开发人员通常需要设置自定义背景图像。标准方法是使用 CSS 和 HTML。
在开发 React 应用程序时，你有许多设置背景图像的选项。你可以使用常规 CSS 文件或使用 CSS-in-JS 解决方案，例如 React 中的内联样式。

在 React 中使用内联样式设置背景图像

内联样式允许你在 JavaScript 文件中配置 HTML 或 React 组件的样式。这是在 React 类组件中设置背景图像的示例：

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML 与 JSX

像 HTML 一样，在 JSX 中，我们使用容器的 style 属性来定义内联样式。但是，与 HTML 不同的是，我们不能将其值设置为简单的文本。相反，我们使用大括号来传递 JavaScript 变量 containerStyle。这个变量本质上是一个对象，它包含 CSS 属性的键值对及其对应的值。

一个重要的区别是 style 对象的键不能包含空格或其他非字母数字符号。在常规 CSS 中，该属性将被定义为 background-image，但在 JavaScript 中它变成了 style 对象的 backgroundImage 属性。

使用 CSS-in-JS 解决方案的另一个优势是你的样式定义可以包含变量引用。这是通过使用模板文字来实现的。下面是一个例子：

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

在这种情况下，样式将反映对变量的更改。

在 React 中使用内联样式将本 Map 像设置为背景

如果你想使用本地 assets 文件夹中的图像，你可以使用 import 语句或 require() 方法来加载它。但是，只有在你的开发环境包含 webpack 时，加载图像才有效。

无论你选择以哪种方式将图像加载到应用程序中，你都必须指定相对路径：

import image from "./assets/filename.jpg"

此相对路径假定组件和资产文件夹都位于 src 文件夹中。

导入图像后，你可以通过导入的名称（在本例中为 image）来引用它，就像引用变量一样。你在应用中使用的每张图片都必须单独导入，但你的背景图片只需导入一次。

你还可以创建一个单独的变量并使用它来存储使用 require() 方法加载的图像值：

const image = require("./assets/filename.jpg")

加载图像并为它们指定一个变量名称更具可读性，并让你可以在必要时自由地进行更改。