如何在 React 的 public 文件夹中设置背景图片（创建 React App）

Question

我正在尝试在 .css 文件中设置 background-img，该文件是在 src 文件夹中创建的

src/Components/Component/Comp.css

.services {
  background-image   : url("./images/img-2.jpg");
  background-position: center;
  background-size    : cover;
  background-repeat  : no-repeat;
  color              : #fff;
  font-size          : 100px;
}

我收到以下错误：

Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\react\react-website\src\images\img-1.jpg'

为了修复它，我将图像文件夹从 public 复制到 src 并且它工作正常但是现在如果我想在 React 组件中访问该路径中的那些图像。例如：

src/Components/Cards/Cards.js

<CardItem
src="./images/img-9.jpg"
text="Explore the hidden waterfall deep inside the Amazon jungle"
label="Adventure"
path="/services"
/>

src/Components/Cards/CardItem.js

const { src, text, label, path } = props

    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={path}>
                    <figure className="cards__item__pic-wrap" data-category={label}>
                        <img src={ src } alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

我没有收到任何错误，但没有显示简单图像。

Where would I keep the images folder and how access to resources from .css and .js files correctly?

Answer 1

如果你不想在你的组件中导入图片，那么你可以通过以下方式显示图片

var imageName = require('./images/img-9.jpg')
<img src={imageName} />

此处，require 用于静态“导入”，因此您需要更改导入。

不过您也可以通过以下方式进行

import imageName from './images/img-9.jpg';
<img src={imageName} />

这是另一种方法

Answer 2

因为您的文件位于 src/Components/Component/Comp.css 而图像位于 public 文件夹中。您需要从 Comp.css 文件升级到 3 级才能 select 图像。你需要做这样的事情，这很可能会起作用，你的 IDE 也很可能会通过建议来帮助你找到路径：

<CardItem
src="../../../public/images/img-9.jpg"
/>

但是，在理想情况下，您不应将图像放在public文件夹中，而最好创建一个assets文件夹在 src 中，然后在 assets 中创建一个 images 文件夹，然后将图像放入 images 文件夹中。

案例中的路径为：

../../assets/images/img-9.jpg

Answer 3

这是我的解决方案：

const { src, text, label, path } = props

    // How I needed a dinamic solution for reuse the component, here i assign the src value and complete path to a const.
    //IMPORTANT: It is an object so we have to access to default property
    const imgSrc = require(`../../assets/images/${src}`).default

    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={path}>
                    <figure className="cards__item__pic-wrap" data-category={label}>
                        <img src={imgSrc} alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

Answer 4

到 2021 年底，这仍然是一个正在进行的讨论，并且在相关 repo 中是一个非常混乱的问题。（对于那些使用最新版本的 CRA 的人）

似乎一个单一的提交是所有这些混乱的原因（实际上很有趣的故事，你可以在这个讨论中遇到这个“名人”。）查看 here.

对于那些因为同样的问题而停在这里的人，如果其他一些解决方案对您不起作用，最好的做法似乎是将所有图像移动到 src 文件夹中。这不是一个很好的解决方案，在某些情况下也没有用，但仍然是我们迄今为止最好的选择。

我个人在 src 下创建了一个文件夹：src/assets/images

并将我所有的图片都移到那里。在 JSX 文件中，为了能够使用此文件夹中的任何图像，我们需要先像这样导入它（您的路径可能会有所不同）：

import deleteModalIcon from '../../../assets/images/delete_modal_icon.svg'

然后，我就可以这样使用它了:

<img src={deleteModalIcon} alt='' />

在位于 src 文件夹顶层的 css 文件中，为了能够使用图像，我这样做了：

.name:after {content: url('assets/images/edit_icon.svg');}

请注意，在此讨论中有一些关于构建后图像消失的抱怨。

对于将来会阅读本文的人：如果您当时对该问题有可靠的解决方案或官方修复，请在评论中告诉我 =)

如何在 React 的 public 文件夹中设置背景图片（创建 React App）

How to set a background image from the public folder in React (Create React App)

javascript

css

jsx

reactjs

create-react-app