反应 CSS 内联与 CSS 外部样式

Question

我一直看到有些事情在反应 CSS 内联样式与 CSS 外部工作表样式时并不相同。 我在向我的反应应用程序添加背景图像时遇到问题。 我无法通过正常的 CSS 方式编译它。 似乎无法解决。

我最终使用了一种行之有效的内联样式方法。 我不确定这是否是添加背景图像的最有效方法。

添加背景图像以进行反应，内联或外部的最佳方式是什么。

工作代码：

应用程序.js

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  const mystyle = {
    backgroundImage: "url(/images/bg-pattern-top.svg)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"
    
  }
  return (
    <div style={ mystyle }>
     <PorfileCard/>
    </div>
  );
}

export default App;

通过外部 CSS 无工作代码

应用程序.css

body {
  margin: 0;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  background-color: (var(--darkCyan));
  background-image: url("images/bg-pattern-top.svg");
}

我尝试使用前导斜杠并删除引号。 我犯了同样的错误。

Answer 1

如评论中所述，将您的图像文件夹放在“公共”目录中并访问这些图像，请使用：

process.env.PUBLIC_URL

例子：

<div style={{ background: `url(${process.env.PUBLIC_URL)/images/bg-pattern-top.svg` }}>
</div>



<img src={process.env.PUBLIC_URL + /images/bg-pattern-top.svg} alt="" />