如何在react组件中添加图像?

Question

在我的公共文件夹中有一个名为Image的文件夹，其中包含一个jpg图像文件，但它在浏览器中工作。我试过用"import image ./public/image/cats.jpg"导入它这也没起作用

import { Component } from 'react';
import './App.css';

class BasicFigure extends Component {
render() {
return (
<figure>
<img src="./public/Image/cats.jpg" alt="a cat" />
<figcaption>This is a picture of a cat</figcaption>
</figure>
);
}
}
export default BasicFigure;

Answer 1

在你的组件中只给出图像路径。React会知道它在公共目录中。

<img src="/Image/cats.jpg" alt="a cat" />

Answer 2

这可能取决于一些事情。比如你正在使用什么打包器，以及它如何访问构建应用程序所需的文件。然而，另一个可能的问题可能是你声明了一个不正确的图像源的相对路径。

注意<img src=".public/Image/cats.jpg"可能需要一个不同的相对路径。例如，如果公用文件夹就在你的React文件旁边，它应该是./pubic，而不是.public。或者在任何情况下，确保你写的是正确的相对路径。