So importieren Sie Bilder in React

So importieren Sie Bilder in React: 1. Importieren Sie über die Importmethode, der Code ist [import logo from './asset/logo.jpg'] 2. Verwenden Sie die require-Methode, der Code ist [

Die Betriebsumgebung dieses Tutorials: Windows10, React16, dieser Artikel gilt für alle Computermarken.

So importieren Sie Bilder in React:

1. Über die Importmethode (geeignet zum Einfügen statischer Bilder):

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. Verwenden Sie die require-Methode (Sie können diese Methode zum Einfügen dynamischer Bilder verwenden):

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

require kann keine Variablen haben, die rein sind Stellen Sie Bildadressen dar, es können jedoch Variablen und Zeichen verwendet werden. Verwenden Sie diese Methode durch String-Splicing.

3. Bilder können in CSS direkt über die Bildadresse (die gleiche wie die native) referenziert werden.

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonSo importieren Sie Bilder in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!