react.js Ersetzen Sie img src onerror
Ich habe einen reagieren Komponente, ist der detail-Ansicht aus einer Liste.
Ich versuche, ersetzen Sie das Bild mit einem Standard-Bild, wenn das Bild nicht vorhanden ist und es wird ein 404-Fehler.
Ich würde normalerweise verwenden Sie die onerror-Methode in der img-tag, aber das scheint nicht zu funktionieren.
Ich bin mir nicht sicher, wie dies zu tun mit reagieren.
Hier ist meine Komponente:
import React from 'react';
import {Link} from 'react-router';
import ContactStore from '../stores/ContactStore'
import ContactActions from '../actions/ContactActions';
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = ContactStore.getState();
this.onChange = this.onChange.bind(this);
}
componentDidMount() {
ContactStore.listen(this.onChange);
ContactActions.getContact(this.props.params.id);
}
componentWillUnmount() {
ContactStore.unlisten(this.onChange);
}
componentDidUpdate(prevProps) {
if (prevProps.params.id !== this.props.params.id) {
ContactActions.getContact(this.props.params.id);
}
}
onChange(state) {
this.setState(state);
}
render() {
return (
<div className='container'>
<div className='list-group'>
<div className='list-group-item animated fadeIn'>
<h4>{this.state.contact.displayname}</h4>
<img src={this.state.imageUrl} />
</div>
</div>
</div>
);
}
}
export default Contact;
- Ich lief in dieses problem, und ich habe nicht den code, um zu helfen im moment, aber was ich Tat, war, legen Sie die javascript-Prüfung in componentdidmount, das sieht für ein image-Fehler, wenn Sie auftreten, wird ein callback ausgelöst, die ersetzt das Bild mit dem Standard-Bild.
- Bitte akzeptieren Sie die Antwort von Georgii Oleinikov, weil derzeit beste erzielte beantworten kann produzieren ewigen Schleife und so ist überhaupt nicht gut.
- Fand dieses video-tutorial zu diesem Thema - youtu.werden/90P1_xCaim4, die eigentlich mir geholfen, Aufbau einer vollwertigen image-Komponente für meine Anwendung. Ich fand auch diese zusammen mit einem tollen Preloader für mein Bild-Komponente - youtu.werden/GBHBjv6xfY4. Durch die Kombination der beiden können Sie einen wunderbaren UX für den Benutzer.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da gibt es keine perfekte Antwort, ich bin Entsendung snippets, die ich verwende. Ich bin mit wiederverwendbaren
Image
Komponente, die fallbacks zufallbackSrc
.Seit dem fallback-image könnte Sie nicht wieder auslösen und die unendliche Schleife, re-Rendern, ich habe
errored
Zustand.JS:
Dies funktioniert am besten für mich
e.target.onerror = null
?Können Sie unkontrollierte Komponente:
Müssen Sie nur definieren onError-handler als den Zustand ändern, die trigger-Komponente render-Methode und schließlich die Komponente re-Rendern mit Platzhalter.
Bitte nicht verwenden, jQuery und Reagieren zusammen!
Arthur ' s Antwort führt in unendliche Rückrufe, wenn fallback-image auch nicht.
Zu vermeiden, legen Sie zunächst einen Zustand, in dem Konstruktor für imageLoadError wie wahr :
und dann prüfen, ob diese state-Wert im
onError
Funktion zur Vermeidung von unendlichen Rückrufe,der code wird wie folgt Aussehen :-
Lief in ein ähnliches problem und die beste Lösung, die ich finden konnte, war Georgii Oleinikov's Antwort. (Nicht erfordern, dass neue
imageLoadError
Zustand, wie vorgeschlagen, durch Nitesh Ranjan in seiner Antwort)e.target.onerror = null
ist nicht erforderlich (und nicht wirklich helfen), weil die if-Bedingung ist genug, um zu verhindern, dass die endlos-Schleife(wenn die backup-image nicht geladen sind).Also:
EDIT: anders herum wird ein flag zu setzen, die außerhalb der Rückkehr Klammern und überprüfen Sie das flag in der if-Anweisung. Code sollte wie folgt Aussehen:
Nahm ich @Skay Antwort und erstellt eine wiederverwendbare Image-Komponente. Posten, falls es jemand hilft:
JS:
<img />
Komponente, sondern in der mit<Image />
Komponente, was bedeuten würde, refactoring als eine stateful-Komponente und mit so etwas wiethis.setState({ src: defaultSrc })
.@DepH die Antwort ist schön, aber es zu produzieren und unendliche Schleife, wenn Sie Ihre Fehler Quelle auch nicht laden. Dies hat mir geholfen, zu vermeiden, die callback-loop:
e.target.onerror = null
wird nicht gebraucht. Noch, dies muss akzeptiert werden Antwort.Für diejenigen, die wie ich auch wollte, ändern Sie die Stile der Elemente und/oder ändern Sie die img-Quelle, nur etwas wie das hier tun:
Hoffe, es hilft!
dies ist, was ich bin derzeit mit.
Das ist, wie ich es Tat.
Können Sie
object
wenn das ok mit Ihrer Anforderung. So etwas wie unten funktioniert einwandfreiÜberprüfen Sie diese Antwort für mehr details
https://stackoverflow.com/a/29111371/1334182
Hier ist eine Antwort mit Haken:
Und wenn Sie behandeln möchten, die
src
prop ändern, können Sie einkey
prop dersrc
.https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
Nur extrem gekünstelt edge-Fall, wo mit Hilfe eines Schlüssels, wie dies fehlschlagen, wird mit dem Geschwister-Komponenten. Ich denke, dass nur ein Geschwister-Knoten gerendert wird, wenn Sie die gleiche Taste. Um dies zu umgehen, könnte man wahrscheinlich wickeln Sie das Bild in einem
<>
Fragment
.Ich schrieb wie dieser.
dies funktioniert für mich .
student ist der name von meinem array und noimage Bild, wenn kein Bild angezeigt.