如何使用本地服務器在本地顯示圖像以進行反應？

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} />