使用 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn