React 背景图像教程 - 如何使用内联 CSS 样式设置背景图像

有四种方法可以使用 React 的内联 CSS 设置 backgroundImage 样式属性。

本教程将向你展示所有四种方法，以及每种方法的代码示例。

如何使用外部 URL 在 React 中设置背景图像

如果你的图像位于线上的某个位置，你可以通过放置这样的 URL 来设置元素的背景图像：

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

上面的代码将渲染一个应用了样式 background-image: url（https://via.placeholder.com/500）的单独的 <div> 元素。

如何在 React 中从 /src 文件夹设置背景图像

如果你使用 Create React App 创建应用程序，并将图像放在 src/ 文件夹中，你可以先 import 图像，然后将其作为元素的背景：

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

当你运行 npm start 命令时，React 将显示 “Failed to Compile” 错误，并在找不到图像时停止构建：

这样，就不会在你的 web app 上显示任何损坏的图像链接。在上面的代码中，backgroundImage 的值是使用模板字符串设置的，它允许你嵌入 JavaScript 表达式。

如何在 React 中使用相对 URL 方法设置背景图像

Create React App 中的 public/ 文件夹可用于将静态资源添加到你的 React 应用程序中。你放在文件夹中的任何文件都可以在线访问。

如果将 image.png 文件放在 public/ 文件夹中，则可以在 <你的主机地址>/image.png 中访问它。在本地计算机上运行 React 时，图像应位于 http://localhost:3000/image.png。

然后，你可以分配相对于你的主机地址的 URL 来设置背景图像。下面是一个例子：

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

通过像上面的示例一样将 URL 路径设置为 /image.png，浏览器将在 <你的主机地址>/image.png 中查找背景图像。

如果要将图像组织到文件夹中，你还可以在 public/ 中创建另一个文件夹，例如：

创建文件夹的时候，请不要忘记将 backgroundImage 的值设置为 url(/img/image.png)。

如何使用绝对 URL 方法在 React 中设置背景图像

你还可以使用 Create React App 的 PUBLIC_URL 环境变量来包含绝对 URL，如下所示：

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

当你在本地计算机上运行它时，React 脚本将处理 PUBLIC_URL 的值。当你在本地运行它时，它看起来像一个相对 URL 而不是绝对 URL：

只有在稍后将 React 部署到生产应用程序中时才会看到绝对 URL。

如何使用附加属性设置背景图像

如果你想进一步自定义背景图像，可以通过在 backgroundImage 之后添加其他属性来实现。下面是一个例子：

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

上面设置的属性会将 background-repeat: no-repeat 和 width: 250px 以及 background-image 样式添加到 <div> 元素。

感谢你阅读本文，希望这篇文章对你有用。如果你有任何问题，可以在 Twitter 上找到我。我也会不时分享一些简短的开发技巧。🙂