javascript - 无法从 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 在 block 级元素上设置图像时:

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

这应该可以正常工作(前提是您的 CSS 文件的相对路径是正确的)

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

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

return(<Logo/>)