无法从 CSS 创建 React App 中的公用文件夹导入

Question

在使用 Create React App 引导的项目中，在我的public文件夹中，我有一个带有文件logo512.jpg的assets文件夹。

当我像这样在组件中引用文件时

<div>
    <img src='/assets/logo512.jpg'/>
</div>

我一切正常。 但是，当我在 CSS 文件中为同一组件引用同一文件时，如下所示：

background {
    background-image: url('assets/logo512.jpg');
}

然后错误Can't resolve '/assets/logo512.jpg' in DIRECTORY_OF_COMPONENT/assets/logo512.jpg

请注意， DIRECTORY_OF_COMPONENT 不是公用文件夹，而是 CSS 文件所在的文件夹。如何制作它，以便 url 引用公用文件夹？

下面是完整的代码以及我的文件结构：

// HomePage.js

import React from 'react';
import 'tachyons';
import './HomePage.css';

function HomePage() {
    return (
        <div className="background tc">
            <div>
                <img src='/assets/logo512.jpg'/> //this works 
            </div>
        </div>
    );
}

export default HomePage;



// HomePage.css
.background {
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    background: url('/assets/logo512.jpg'); //this does not work
}

Answer 1

更新：

情况1：

如果您的图像在公用文件夹中。 如果您在public中使用assets文件夹，那么代码应该可以工作。

所有三种情况的 Codesandbox 演示： https://codesandbox.io/s/images-not-loaded-hkzq1

案例二：

如果您想使用public文件夹以外的图像，您需要先将图像导入您的 React 项目。 （确保路径正确且您的图像）。

import MyImage from "./assets/logo512.jpg"

然后在src属性中使用。

<img src={MyImage}/>

案例 3：当使用 CSS 在块级元素上设置图像时：

.background  {
  height:200px; /* Make sure height of the div is given for image to be within*/
  background-image: url("assets/logo512.jpg");
}

这应该可以正常工作（前提是您的相对路径是正确的 w.r.t CSS 文件）

注意：对于SVG Images ，React 提出了一种基于组件的方式，我们通过将 svg 与ReactComponent导入来将其用作组件。

import { ReactComponent as Logo } from './logo.svg';

return(<Logo/>)

Answer 2

我自己也有这个问题，但发现其他答案太模糊了。

需要明确的是：CSS 中的assets对应于项目中的src/assets目录。

这是我在我的 CSS 中使用 static 资产：

@font-face {
  font-family: "ITC Clearface";
  src: url("assets/ClearfaceStd-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

但是您也可以根据编译器显示的错误来诊断您的路径无法正常工作的原因，例如：

找不到模块：错误：无法解析“/home/mike/Code/myapp/website/src”中的“assets/somefile”

通过运行（bash 或 powershell）查看该文件是否存在

ls /home/mike/Code/myapp/website/src/assets/somefile

如果这不起作用，则该文件不存在 - 您的名称可能有错字！ 就我而言，事实证明我在 CSS 中使用的字体文件有一个小的拼写错误。