React CSS 内联与 CSS 外部样式答案

【问题标题】：React CSS inline vs CSS external stylingReact CSS 内联与 CSS 外部样式
【发布时间】：2021-06-10 20:40:39
【问题描述】：

我已经看到，在 react CSS 内联样式和 CSS 外部表单样式中，有些东西的工作方式并不相同。我在向我的反应应用程序添加背景图像时遇到问题。我无法通过正常的 CSS 方式编译它。好像解决不了。

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

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

工作代码：

App.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 没有工作代码

App.css

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

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

【问题讨论】：

当您使用内联/相同文件 css 时，react 会搜索公共路径，在这种情况下为“/”，并且能够检索图像，但对于外部 css 文件，您需要提供正确的那里的文件路径，例如“../../path-to-image”
我试过这样 background-image: "url(../../images/bg-pattern-top.svg)";它确实编译但不适用于后台
请使用背景图片：url("./images/lunchTime.png"); codesandbox.io/s/image-test-5b4i3?file=/src/styles.css:7-58
"images/bg-pattern-top.svg" = "./images/bg-pattern-top.svg"。请记住，这是一个 CSS 路径，因此它相对于您的 CSS 文件的位置，而不是网站的根目录。另外，您可以将所有 CSS 移动到一个简单的外部链接 CSS 文件吗？最后，许多浏览器不支持在 CSS 中使用“var”，包括 IE1-11。
所以要达到图像我应该做“././images/bg-pattern-top.svg”吗？到达 public/images/bg-pattern-top.svg ?

标签： javascript css reactjs

【解决方案1】：

将您的图像文件夹放在 cmets 中提到的“公共”目录中并访问这些图像，使用：

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="" />

【讨论】：