Question

我想添加两个图像1）java.png 2）neural.png当我尝试输入src="java.png"和src="neural.png"时，它不会加载图像。我想在我的内容组件中添加这些图像。

content.js：

class Content extends Component {

  render() {
    return (
      <div> 

                     <div className="col l4">
                            <img src="java.png" alt="Java" height="25" width="25"></img>
                            <h6 className="cardtitle1">NEW LAUNCH</h6>
                            <p className="cardcontent1">JAVA</p><p></p>
                            <p className="cardcontent1">Foundations</p>
                      </div>

                      <div className="col l4">
                            <img src="neural.png" alt="Neural Network" height="25" width="25"></img>
                            <h6 className="cardtitle2">NEW LAUNCH</h6>
                            <p className="cardcontent2">Neural Newtwork</p><p></p>
                            <p className="cardcontent2">Foundations</p>
                      </div>
 </div>
    );
  }
}

export default Content;

文件路径如下所示：

在控制台中显示图片无法加载：

Answer 1

实际上，有许多方法可以在ReactJS中处理图像。

import Java from './java.png';

然后像

一样使用它

  <img src={Java} alt="Java" height="25" width="25" />

同时检查此链接会对您有所帮助Unable to load images from local library in React.js

Answer 2

试试这个

 <img src="./java.png" alt="Java" height="25" width="25"></img>

Answer 3

我将所有图像放在公共文件夹下的一个“图像”文件夹中，然后在我项目的任何位置，我都可以在 img 元素中使用以下路径：

它适用于我使用 create-react-app 启动的项目，特别是当我有太多图像时，我不必一张一张地导入。

如何在ReactJS中使用相对路径加载图像？

3 个答案: