How to import images in react

How to import images in react: 1. Import through the import method, the code is [import logo from './asset/logo.jpg']; 2. Use the require method, the code is [

The operating environment of this tutorial: windows10, react16, this article is applicable to all brands of computers.

How to import images in react:

1. Through the import method (suitable for inserting static images):

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. Use the require method (you can use this method to insert dynamic pictures):

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

require cannot have variables that purely represent the image address, but this method can be used by concatenating variables and strings.

3. Images can be referenced in css by directly using the image address (the same as the native one).

Related free learning recommendations: JavaScript (Video)

The above is the detailed content of How to import images in react. For more information, please follow other related articles on the PHP Chinese website!