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

Question

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

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

<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

案例 2：

如果您想使用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");
}

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

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

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

return(<Logo/>)