react在项目中图片引入方式

react中引入图片的方式

1.通过import导入进行引入

`导入图片文件的路径`
import Image from './logo.jpg';

//进行引用

<img src={Image} className={images}/>

//在css中进行样式的编写

2.通过require进行引入

 const [requireImg, setRequireImg] = useState(require('src/assets/images/home/forgets.png')) 

`通过使用<img />`

<img src={requireImg} />

3.通过require进行引入

 const Image= "@/assets/images/home/forgets.png";
  <img
                style={{
                  height: '60%',
                  width:'60%',
                  marginTop: '2px',
                  marginLeft: '37px',
                }} 
                src={require(`${Image}`)}
                />
    

4.通过background: url()进行引入

import styles from './index.module.scss';

<div className={styles.forgets}></div>

    //在index.module.scss文件中进行样式的编写
    
.forgets{
  width: 250px;
  height: 120px;
  margin-left: 26px;
  background: url('@/assets/images/home/forgets.png') no-repeat 10px;
  background-size: 50%;
}