react在项目中图片引入方式

最新推荐文章于 2024-10-15 11:46:40 发布

原创最新推荐文章于 2024-10-15 11:46:40 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

博客主要介绍了前端的引入方式，具体提及通过导入进行引入，还列举了其他几种未详细说明的引入途径，与前端开发相关。

`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%;
}