React - Status Fehler beim Laden des Bildes

Ich bekomme ein seltsames Problem in React, wenn ich versuche, ein Bild anzuzeigen. Der Code, der dies verursacht, ist ein <img src={'./assets/logo.svg'} /> Tag. Trotz der Fehlermeldung wird das Bild angezeigt.React - Status Fehler beim Laden des Bildes

Die Fehlermeldung lautet wie folgt zusammen:

Dies ist der Komponentencode:

import React from 'react'; 
 
import ReactDOM from 'react-dom' 
 
require('../img/logo.svg'); 
 

 
export default class App extends React.Component { 
 

 
constructor(props) { 
 
    super(props);   
 
} 
 
render() { 
 
    return (
 
     <div className="app-wrapper"> 
 
      <img src={'./assets/logo.svg'} /> 
 
     </div> 
 
    ) 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Pegasus</title> 
 
</head> 
 

 
<body> 
 
    <div id="app" /> 
 
    <script src="app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

Irgendwelche Vorschläge sehr geschätzt werden! Vielen Dank!!

Quelle

2017-05-17 bilo-io

Brauchst du diese Linie? 'require ('../ img/logo.svg');' –

danke ... brauche es in diesem Beispiel nicht. Es wurde gerade von einem anderen Ansatz übrig gelassen, um das Bild zu laden –

Es gibt einige Dinge, wie Martin in den Kommentaren vorgeschlagen hat, benötigen Sie die require-Anweisung in Zeile 3?

Erstens fehlt Ihnen auch eine schließende Klammer auf Ihrem class. Zweitens müssen Sie entweder das Bild import oder require Bild.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import logo from './assets/logo.svg'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div className="app-wrapper"> 
     <img src={logo} /> 
     {/* OR <img src={require('./assets/logo.svg')} /> */} 
     </div> 
    ); 
    } 
}

Eine letzte Anmerkung, wenn Sie unten props vorbei sind, die vom Typ String sind, Sie müssen sie nicht wickeln in {}, können Sie sie wie so überliefern:

<Navigation title="My Navigation" />

Quelle

2017-05-17 12:33:03 Dan

React - Status Fehler beim Laden des Bildes

Antwort

Verwandte Themen