此问题在此处已有答案:
React won't load local images(24个答案)
Correct path for img on React.js(14个答案)
12小时前关门了。
我在我的公共文件夹中有一个名为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;
2条答案
按热度按时间a64a0gku1#
在你的组件中只给予镜像路径。React会知道它在公共目录中。
b91juud32#
这可能取决于几个因素。例如您使用的捆绑器以及它如何访问构建应用所需的文件。然而,另一个可能的问题可能是您声明了错误的图像源相对路径。
请注意,
<img src=".public/Image/cats.jpg"
可能需要有不同的相对路径。例如,如果公共文件夹就在您的React文件旁边,则应该是./pubic
,而不是.public
。或者在任何情况下,请确保您编写了正确的相对路径。