反应无法显示来自本地路径的图像

Question

我是新手，我正在尝试显示 src/images 文件夹中的图像。 但是在插入正确的路径后，图像也不可见。 Here you can see my img tag path and on the left side folder structure

Answer 1

从您提供的图片来看，您似乎使用了require("path...")，这不是一个好方法，但它是有效的，但不是一个好的做法，推荐使用import X from "somewhere" 语法并且很常见。

我建议你在 react 中使用这两种方式中的任何一种来使用图像。

1. 将图片放入public文件夹并使用href标签中的相对链接，即：

<img href="/images/panda.png" alt="cute panda" />

1. 将图像放在src 文件夹内的某个文件夹中就像您在图像中所做的那样 并使用 ES 导入语法导入图像，并在 {} 表达式中使用导入的图像变量 src 道具，即：

import PandaImg from "../images/panda.png"

const Panda = ()=>{
  return <img src={PandaImg} alt="cute panda" />
}

这里有一个 CodeSandbox 示例可以帮助您在更广泛的上下文中进一步探索代码。