通过 ReactJS 在 CSS 文件中使用图像

IT技术 css reactjs
2021-04-15 07:49:09

我的src/assets/imagesReactJs 项目中的文件夹中有一个图像如何在不使用相对路径的情况下在 CSS 文件中将其用作背景图像?

在 js 文件jsconfig.jsonsrc文件夹中添加compilerOptions.baseUrl我可以执行的操作:

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 文件,应该避免弹出。

4个回答

您可以使用 (。/) 。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文档链接在这里

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

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

基本上,3个步骤:

  1. 首先将文件加载器用于您想要的任何图像扩展名。

  2. import 您在 js 文件中的图像。

  3. 现在 CSS 文件可以简单地获取简化的 url

更新:由于您不想修改 webpack 配置文件,您可以考虑使您的图像内联。它通过不为图像创建另一个 http 请求来提高性能(仅适用于小尺寸图像)

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

您可以设置公共路径/因此图像路径相对于公共解析,因此如果您在公共路径中有图像,那么只需执行 images/assets/asd.jph 它将使用公共路径解析它

您可以在 webpack 配置中设置如何解析特定文件
2021-05-30 07:49:09
我使用了 create-react-app,所以我没有暴露 webpack 文件,应该避免弹出。
2021-06-02 07:49:09
然后我不确定任何其他方式
2021-06-09 07:49:09
如果图像不在公共路径中,而是在 src 或 node_modules 文件夹中怎么办?我可以做一个符号链接,但我不认为这是一个面向 reactjs 的解决方案。
2021-06-17 07:49:09

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