首页 >web前端 >js教程 >react中如何导入图片

react中如何导入图片

coldplay.xixi
coldplay.xixi原创
2020-11-18 15:41:296595浏览

react中导入图片的方法:1、通过import方式导入,代码为【import logo from './asset/logo.jpg'】;2、使用require方法,代码为【

react中如何导入图片

本教程操作环境:windows10、react16,本文适用于所有品牌的电脑。

react中导入图片的方法:

1、通过import方式(适用于插入静态图片):

import React from 'react'
import logo from './asset/logo.jpg'
export default class Login extends React.Component {
    render() {
        return (<>
            <img src={logo} alt="logo" />
        </>)
    }
}

2、使用require方法(可以使用此方法插入动态图片):

<img src={require(&#39;../img/iconxx.png&#39;)} alt="" />

require中不能有纯粹的代表图片地址的变量,但是可以通过变量和字符串拼接的方式来使用此方法。

3、css中可以通过直接使用图片地址的方式来引用图片(和原生的一样)。

相关免费学习推荐:JavaScript(视频)

以上是react中如何导入图片的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn