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

一个 React 项目是使用创建的 create-react-app命令，任务是使用 react 内联样式设置背景图像。下面讨论三种方法：

方法 1：使用外部 URL 设置背景图片：如果图片位于在线某处，则可以这样设置元素的背景图片：

文件名：App.js

Javascript

import React from "react";
  
const App = () => {
  return (
    

      
 HELLO 
    
  );
};
  
export default App;

方法 2：使用绝对 URL 方法设置背景图片：如果将图片（例如 background.jpg 文件）放在 public/ 文件夹中，则可以使用PUBLIC_URL环境变量包含绝对 URL。

文件名：App.js

Javascript

import React from "react";
  
const App = () => {
  return (
    

      
Hello
    
  );
};
  
export default App;

方法3：使用Relative URL方法设置背景图片：如果你把你的图片，例如background.jpg文件放在react app的public/文件夹中，你可以在<你的主机地址>/background.jpg中访问它。

然后，您可以分配相对于您的主机地址的 URL 来设置背景图像，如下所示：

文件名：App.js

Javascript

import React from "react";
  
const App = () => {
  return (
    

      
Hello
    
  );
};
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：