如何使用本地服务器在本地显示图像以做出反应？

Question

我在 React 中看到了一些关于显示图像的线程，但它们似乎与我在这里的需要不符。

首先，我使用 npx create-react-app 启动了一个项目，然后我使用了为我生成的内容提供的 npm start 功能。

现在，当我尝试渲染图像标签时，似乎没有任何效果。我可以在我的调试器中看到 URL 正在按我的预期通过，但我尝试过类似的操作：

./images/image.png
/images/image.png
images/image.png
src/images/image.png
localhost:3000/images/image.png
require("./images/image.png")

我尝试将图像移动到根文件夹并将 src 设置为“image.png”，并且我尝试了几乎所有我能想到的文件路径名组合。上面显示的只是一个小样本。

作为参考，我的文件结构让我在一个名为 src 的文件夹中工作，该文件夹包含一个名为 images 的文件夹，其中包含有问题的图像。在视觉上，它看起来像这样：

> src/
  index.js
  > images/
    image.js

以及其他一些不相关的文件，例如 index.html。我可以得到其他东西来渲染，只是不是这个 img 标签，它让我发疯！感谢任何可以提供帮助的人！

Answer 1

如何将它包裹在括号内：

<img src={"./path/to/image"} />

或先导入：

import img from "./path/to/img";

<img src={img} />

例如，您在 index.js 中使用此图像：

import img from "./images/image.png";

<img src={img} />