反应 |如何在 React 中显示我的图像？ [复制]答案

【问题标题】：React | How can i display my image in React? [duplicate]反应 |如何在 React 中显示我的图像？ [复制]
【发布时间】：2018-07-02 01:45:11
【问题描述】：

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

我知道这是一个基本问题，但我真的很难仅仅显示我的图像。在某些框架中，我可以将其存储在资产文件夹中，但我如何在 react js 中做到这一点？

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

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

你需要使用require

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

【讨论】：

【解决方案2】：

只需将图像路径放在src 属性中，并使用require 调用

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

或者用你自己的方式

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

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

【讨论】：

谢谢它正是我想要的 :)

【解决方案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;

【讨论】：