So fügen Sie in React ein Hintergrundbild hinzu

So fügen Sie in React ein Hintergrundbild hinzu: Geben Sie zunächst den benötigten Bildpfad ein, z. B. [import Background from '../../../images/xxx.jpg'], und definieren Sie dann den Hintergrundstil, z. B as [width: „ 100 %“]; Rendern Sie die Seite einfach endgültig. Umgebung dieses Artikels: Windows 10, React16-Version

in React js Div-Hintergrundbild festlegen im Projekt

In herkömmlichen Projekten müssen wir nur den Stil in der CSS-Datei definieren und dann die entsprechende Klasse zum div hinzufügen. In React.js, insbesondere in einer mit Webpack erstellten Umgebung, scheint es jedoch, dass die Klasse Der Stil muss direkt definiert werden, was nicht sehr gut funktioniert, da Sie in einem solchen Reaktionsprojekt die Klassenattribute „camel case“ className={Obj (an object)} und „style={(an object)“ verwenden müssen. }, um den Stil auf dem Etikett zu definieren.

Wie fügen wir also einem Div ein Hintergrundbild hinzu?

Wie folgt:

//首先引入需要的图片路径
import Background from '../../../images/login.jpg';

//定义背景样式

var sectionStyle = {
  width: "100%",
  height: "400px",
// makesure here is String确保这里是一个字符串，以下是es6写法
  backgroundImage: `url(${Background})` 
};

export default class Login extends Component{
//渲染页面
render(){
        return (
    <div style={sectionStyle}></div>
        )

    }

}

• Code-Screenshot:

Verwandte Empfehlungen:

js-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie in React ein Hintergrundbild hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!