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

Irakli Tchigladze 2023年1月30日
  1. 在 React 中使用内联样式设置背景图像
  2. 在 React 中使用内联样式将本 Map 像设置为背景
使用 React 内联样式设置背景图像

在构建复杂的 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")

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Image