Home >Web Front-end >JS Tutorial >How to import images in react

How to import images in react

coldplay.xixi
coldplay.xixiOriginal
2020-11-18 15:41:296596browse

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 [

How to import images in react

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn