使用 ReactJS 在 CSS 文件中使用图像答案

【问题标题】：Use images in CSS files with ReactJS使用 ReactJS 在 CSS 文件中使用图像
【发布时间】：2019-12-01 10:08:17
【问题描述】：

我的 ReactJs 项目的 src/assets/images 文件夹中有一张图片。如何在不使用相对路径的情况下在 CSS 文件中将其用作背景图像？

我在compilerOptions.baseUrl 中的jsconfig.json 中添加了src 文件夹，所以在js 文件中我可以这样做：

import logo from 'assets/images/logo.svg'
<img src={logo} />

但是 css 文件呢？我有几个文件夹，我想避免像

这样丑陋的字符串

background-image: url(../../../assets/images/logo.svg)

我正在使用 React 16.8.6

编辑：我使用了 create-react-app，所以我没有暴露 webpack 文件，应该避免弹出。

【问题讨论】：

标签： css reactjs

【解决方案1】：

您可以使用 (./) 。 Webpack 自动链接图片例如：-

.user-background{
    background: url("./images/all-bg-title.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
  }

上图（all-bg-title.jpg）位于文件夹/src/images/all-bg-title.jpg

React 文档链接here

【讨论】：

这正是我所需要的，谢谢。解决了我所有的错误。重复这些步骤： 1. 将图像放入 CRA 中的 src/images 文件夹 2. 使用“.”在 CSS 中使用相对路径引用图像在路径的开头，以便 Webpack 可以找到它你救了我！

【解决方案2】：

考虑将 Webpack 用于静态资产包，本教程可能会对您有所帮助：https://webpack.js.org/guides/asset-management/

基本上，3个步骤：

首先将文件加载器用于您想要的任何图像扩展名。
import你的图片在js文件中。
现在 CSS 文件可以简单地获取 url

更新：由于您不想修改 webpack 配置文件，您可能会考虑将图像内联。它通过不为图像创建另一个 http 请求来提高性能（仅适用于小尺寸图像）

【讨论】：

我使用了create-react-app，所以我没有暴露webpack文件，应该避免弹出。
你的意思是像background-image: url("data:image/svg+xml;utf8,<svg......></svg>")这样的东西吗？
考虑制作一个 base64 版本，或者任何格式的内联样式都可以解决问题。
所以我需要将它放在一个变量中（使用 Sass 或 var），以防我需要在多个地方使用它。但是如果我的图片不小怎么办？
Http请求很昂贵，所以除非你的图片是高分辨率的，否则应该没问题。但这对于长期开发来说是一种不好的方法，因为您需要图像的每个 base64 表示。我认为最好的方法是创建你自己的应用程序，这样你就可以利用 webpack。

【解决方案3】：

您可以设置公共路径/ 所以图像路径相对于公共解决因此，如果您在公共路径中有图像然后就做图像/资产/asd.jph 它将通过公共路径解决它

【讨论】：

如果图像不在公共路径中而是在 src 或 node_modules 文件夹中怎么办？我可以做一个符号链接，但我不认为这是一个面向 reactjs 的解决方案。
你可以在你的 webpack 配置中设置如何解析特定文件
我使用了create-react-app，所以我没有暴露webpack文件，应该避免弹出。
那我不确定还有什么办法

【解决方案4】：

尝试在图像上使用 svg 格式，然后创建一个 react 类，然后创建一个 index.js，在其中您将在一个文件中导入所有内容，然后将图像导入到您想要的任何位置

【讨论】：