反应|如何在React中显示我的图像？

Question

如何在反应中显示我的图像？

我知道这是一个基本问题，但我真的很难显示我的图像。在某些框架中，我可以将它存储在资产文件夹中，但我怎么能在反应中执行此操作？

我在App.js组件上调用我的图像 通过这种方式调用。

import macbookPiso from './images/design/macbookPiso.png';

<div class="macbook">
   <img src={macbookPiso.png }/>
</div>

Answer 1

您需要使用require

<div class="macbook">
   <img src={require("./images/design/macbookPiso.png") }/>
</div>

Answer 2

只需将图片路径放在src属性require调用

中

<img src={require('./images/design/macbookPiso.png')}/>

或以您的方式使用

var  macbookPiso  = require './images/design/macbookPiso.png';

<div class="macbook">
   <img src={macbookPiso }/>
</div>

Answer 3

使用create-react-app时，您还可以导入图像并存储在变量中。

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;