Bilder dynamisch vor dem Rendern laden

Question

Ich habe viele Fragen durchsucht, aber ich kann keine richtige Antwort darauf finden. Angenommen, ich habe einen Ordner images, und ich möchte dort ein bestimmtes Bild anzeigen. Ich kenne den Namen des anzuzeigenden Bildes nicht, er wird von einer RESTful-API zusammen mit vielen anderen Details zu dem Objekt, das ich anzeige, zurückgegeben.

als ich noch ein paar Alternativen, das zu tun:

• laden alle Bilder, egal was, dann nur diejenigen machen was ich brauche. Ich habe das an einigen Stellen gefunden, aber ich denke, es ist ziemlich schwer, oder?
• Verwenden Sie webpack bis require die Datei, die ich im laufenden Betrieb brauche.

Die zweite Option scheint hier die beste zu sein. Allerdings, wenn ich tun:

componentDidMount() { 
    axios.get('http://url.to/my/RESTful/api') 
     .then(res => { 
      this.setState(res.data); 
     }); 
} 
render() { 
    var pic = require(`../images/${this.state.picture}`) 
    return (<img src={pic} alt="some name" />) 
); 

Reagieren klagt sie nicht undefined laden kann, weil es beginnt zu machen, bevor der axios Anruf erledigt wird. Eine andere Alternative ist also, einen Loader während des Aufrufs anzuzeigen oder das Rendern im Allgemeinen zu verhindern. Aber meine Frage ist eher: Was ist die beste Vorgehensweise hier? Sollte ich auf jeder Seite einen Loader haben, der dynamische Daten lädt? Vermutlich vermisse ich etwas, weshalb ich die Hand ausstrecken kann. Wie machst du das normalerweise? Danke vielmals.

Answer 1

Versuchen Sie Folgendes:

class ImageLoader extends Component { 
    constructor() { 
     super(); 

     this.data = { 
      data: null 
     }; 
    } 

    componentDidMount() { 
     axios.get("http://url.to/my/RESTful/api").then(res => { 
      this.setState({ data: res.data }); 
     }); 
    } 

    render() { 
     return this.state.data 
      ? <img 
        src={require(`../images/${this.state.data.picture}`)} 
        alt="some name" 
       /> 
      : null; 
    } 
}