图像未在 React 网站中加载，无法解析文件路径

Question

我已经建立了一个 React 编码的网站，但不幸的是我无法正确加载图像。我参考了文档，我正在尝试导入它们，但我不确定如何导入。它在加载网站时抛出一个错误，说它无法解析图像 - 这是另一种说文件路径不正确的方式？

例如 - 我正在尝试从“图像”文件夹导入 - 所以这将是完整的文件路径：

src/Images/cycling.jpg

所以我尝试将图像导入为：

import './cycling.jpg';

import './Images/cycling.jpg

import cycling from './cycling.jpg';

import cycling from './Images/cycling.jpg';

我尝试了后两个，因为文档似乎建议您需要定义图像并为其命名 - 但如果是这种情况，我不知道我需要使用什么名称？

作为参考，我正在尝试将图像导入到相应的组件文件中，该文件位于同一基本 src 文件夹内，但位于单独的组件文件夹下。

src/Components/cycling.js

也可能值得注意 - 其他导入工作完美，网站功能完全符合预期，除了图像。

任何帮助将不胜感激。谢谢！

Answer 1

要在 react 中提供静态文件，您需要将这些文件保存在公用文件夹中。使用create-react-app 自动生成公用文件夹。

在此处保存图像： /react-app/public/Images/cycling.jpg

在组件上使用图像： <img src="/Images/cycling.jpg" />

Official React Doc, Duplicate Question