reactjs 如何在react组件中添加图像?[复制]

ergxz8rk  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(100)

此问题在此处已有答案

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;
a64a0gku

a64a0gku1#

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

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

b91juud32#

这可能取决于几个因素。例如您使用的捆绑器以及它如何访问构建应用所需的文件。然而,另一个可能的问题可能是您声明了错误的图像源相对路径。
请注意,<img src=".public/Image/cats.jpg"可能需要有不同的相对路径。例如,如果公共文件夹就在您的React文件旁边,则应该是./pubic,而不是.public。或者在任何情况下,请确保您编写了正确的相对路径。

相关问题