如何从 React 中的公共文件夹设置背景图像（创建 React 应用程序）

Posted 2023-02-21

【中文标题】如何从 React 中的公共文件夹设置背景图像（创建 React 应用程序）

【英文标题】：How to set a background image from the public folder in React (Create React App)

【发布时间】：2021-03-15 21:24:38

【问题描述】：

我正在尝试在 src 文件夹中创建的 .css 文件中设置背景图像

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'

为了修复它，我将图像文件夹从公共复制到 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   className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">text</h5>
                    </div>
                </Link>
            </li>
        </>
    )

我没有收到任何错误，但没有出现简单的图像。

我应该将 images 文件夹保存在哪里以及如何正确访问 .css 和 .js 文件中的资源？

【参考方案1】：

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

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

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

但你也可以通过以下方式做到这一点

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

这是另一种方法

【参考方案2】：

因为您的文件位于src/Components/Component/Comp.css，而图像位于公共文件夹中。您需要从Comp.css 文件升级 3 级才能选择图像。你需要做这样的事情，这很可能会奏效，你的 IDE 很可能也会通过建议来帮助你完成路径：

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

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

a 案例中的路径是：

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

【参考方案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  className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">text</h5>
                    </div>
                </Link>
            </li>
        </>
    )

【参考方案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');

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

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