如何在React JS中导入徽标图像？

Question

我想在h1

import React from "react";


function Header(){
          
          return(     
                    <h1>Bikinin Kaos ID</h1>    
          );
}

export default Header;

Answer 1

首先，您需要从位置导入徽标，

import logo from '../img/logo-color.png';

然后您需要像以下

<img src={logo} className="App-logo" alt="logo" />

Answer 2

您可以以以下方式导入图像，

    import React from "react";
    import Image from '../img/logo-color.png'

function Header(){
          
          return(  
                  <>   
                   <img src={Image} alt='img' />
                    <h1>Bikinin Kaos ID</h1>
                  </>
          );
}

export default Header;

我创建了一个代码沙盒演示，可以在此处检查
demo

Answer 3

import avatar from "../../../assets/images/avatar.png";

进而，

<img src={avatar} alt="profile" />