有四种方法可以使用 React 的内联 CSS 设置 backgroundImage
样式属性。
本教程将向你展示所有四种方法,以及每种方法的代码示例。
如何使用外部 URL 在 React 中设置背景图像
如果你的图像位于线上的某个位置,你可以通过放置这样的 URL 来设置元素的背景图像:
上面的代码将渲染一个应用了样式 background-image: url
(https://via.placeholder.com/500)的单独的 <div>
元素。
如何在 React 中从 /src 文件夹设置背景图像
如果你使用 Create React App 创建应用程序,并将图像放在 src/
文件夹中,你可以先 import
图像,然后将其作为元素的背景:
当你运行 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 来设置背景图像。下面是一个例子:
通过像上面的示例一样将 URL 路径设置为 /image.png
,浏览器将在 <你的主机地址>/image.png
中查找背景图像。
如果要将图像组织到文件夹中,你还可以在 public/
中创建另一个文件夹,例如:
创建文件夹的时候,请不要忘记将 backgroundImage
的值设置为 url(/img/image.png)
。
如何使用绝对 URL 方法在 React 中设置背景图像
你还可以使用 Create React App 的 PUBLIC_URL
环境变量来包含绝对 URL,如下所示:
当你在本地计算机上运行它时,React 脚本将处理 PUBLIC_URL
的值。当你在本地运行它时,它看起来像一个相对 URL 而不是绝对 URL:
只有在稍后将 React 部署到生产应用程序中时才会看到绝对 URL。
如何使用附加属性设置背景图像
如果你想进一步自定义背景图像,可以通过在 backgroundImage
之后添加其他属性来实现。下面是一个例子:
上面设置的属性会将 background-repeat: no-repeat
和 width: 250px
以及 background-image
样式添加到 <div>
元素。
感谢你阅读本文,希望这篇文章对你有用。如果你有任何问题,可以在 Twitter 上找到我。我也会不时分享一些简短的开发技巧。🙂