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

Question

我在反应中显示图像时看到了几个线程，但是它们似乎与我的需求不符。

首先，我使用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} />