Force Reagieren, um eine Image-Datei neu zu laden?

Question

Meine React App ermöglicht es Benutzern, Profilbilder hochzuladen. Dazu wird das Bild in einen Amazon S3-Bucket hochgeladen und der Pfad zu dem Bild in meiner Datenbank zusammen mit dem Datum und der Uhrzeit gespeichert, zu dem das Bild hochgeladen wurde. Der Dateiname des Bildes wird auf die Benutzer-ID gesetzt.

Ich habe ein Problem, wenn ein Benutzer ein neues Bild hochlädt. Da der Bildpfad derselbe ist, weiß React nichts, was bedeutet, dass ich die Seite aktualisieren muss, um die Änderung zu sehen.

Da ich ein Datumsfeld habe, kann ich mit componentWillReceiveProps wissen, wann ein neues Bild hochgeladen wurde. Das folgende console.log wird zur richtigen Zeit ausgelöst:

componentWillReceiveProps(nextProps) { 
    if (this.state.picDate.getTime() !== nextProps.user.pic.date.getTime()) { 
     console.log('image date has changed'); 
     // this.forceUpdate(); 
    } 
} 

Kann ich das verwenden, um das Bild erneut zu rendern? Ich habe versucht this.forceUpdate(), aber es funktioniert nicht.

Answer 1

Ich denke, das ist wegen des Browser-Cache. Versuchen Sie nach der Änderung der Bild-URL etwas Hash wie date.now() hinzuzufügen. zum Beispiel:

setState({ 
    imageSrc: ..., 
    imageHash: Date.now() 
}) 

und in machen:

render(){ 
    return(
     <img src={`${imageSrc}?${imageHash}`} /> 
) 
} 

Answer 2

Sie können versuchen, so etwas wie erster Satz Zustand Dabei Bild wird nicht Anzeige auf null und wieder eingestellten Zustand zu bestimmtem Bild mit Pfad.

constructor(props){ 
      super(props); 
      this.state = { 
      image_path : 'before update image path' 
      }; 
    }  

    componentWillReceiveProps(nextProps) { 
      if (this.state.picDate.getTime() !== nextProps.user.pic.date.getTime()) { 
       console.log('image date has changed'); 
       //now here set state 
       this.setState({ 
         image_path: null 
        },() => { 
        this.setState({ 
        image_path : 'your new image path or older as you explained both are same'}) 
        }) 
      } 
     } 

Hier habe ich setState zweimal für erstes Mal verwendet es Bild gesetzt wird, sobald wir ihre getan auf null wieder das Bild Pfad festlegen, so wird Bild erneut laden.

Hoffe, das wird helfen.