react.js Remplacer img src onerror
J'ai une réagir la composante qui est la vue de détail à partir d'une liste.
Je suis en train de remplacer l'image par une image par défaut si l'image n'existe pas et il y a une erreur 404.
Je voudrais l'utiliser normalement le onerror méthode dans la balise img, mais qui ne semble pas être travail.
Je ne suis pas sûr de la façon de le faire avec de réagir.
Voici mon composant:
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;
J'ai rencontré ce problème, et je n'ai pas le code pour l'aider à ce moment, mais ce que j'ai fait a été de placer le javascript de vérification dans componentdidmount, qui cherche une image d'erreur, s'ils se produisent, un rappel de feu qui remplace celui de l'image avec l'image par défaut.
S'il vous plaît, accepter la réponse par Georgii Oleinikov, car actuellement le mieux marqué réponse peut produire éternelle boucle et n'est donc pas bon du tout.
Trouvé cette vidéo tutoriel sur la ce - youtu.être/90P1_xCaim4 qui m'a effectivement aidé de construction à part entière un composant de l'image pour mon application. J'ai aussi trouvé ceci avec un impressionnant précharge pour mon composant de l'image - youtu.être/GBHBjv6xfY4. En combinant les deux, vous pouvez fournir un merveilleux UX pour les utilisateurs.
S'il vous plaît, accepter la réponse par Georgii Oleinikov, car actuellement le mieux marqué réponse peut produire éternelle boucle et n'est donc pas bon du tout.
Trouvé cette vidéo tutoriel sur la ce - youtu.être/90P1_xCaim4 qui m'a effectivement aidé de construction à part entière un composant de l'image pour mon application. J'ai aussi trouvé ceci avec un impressionnant précharge pour mon composant de l'image - youtu.être/GBHBjv6xfY4. En combinant les deux, vous pouvez fournir un merveilleux UX pour les utilisateurs.
OriginalL'auteur Joel Lawler | 2015-12-04
Vous devez vous connecter pour publier un commentaire.
Ce qui fonctionne le mieux pour moi
Semble que cette méthode pourrait conduire à une infinité de rappel si "image_path_here" produit et de l'erreur...
vous êtes les meilleurs!!!!!
Quel est le but de
e.target.onerror = null
?elle permettra d'éviter infini rappels lorsque "image_path_here" échoue
OriginalL'auteur Deepak Mallah
Vous pouvez utiliser incontrôlée composant:
OriginalL'auteur K.Arthur
Vous avez juste besoin de définir onError gestionnaire de changer l'état qui va déclencher composant de méthode render et finalement composante sera de nouveau rendu avec un espace réservé.
S'il vous plaît, ne pas utiliser jQuery et Réagir ensemble!
OriginalL'auteur Skay
Arthur de réponse entraînera infini rappels si l'image de remplacement échoue également.
Pour éviter cela, il faut d'abord définir un état dans le constructeur de imageLoadError comme vrai :
puis vérifier cette valeur de l'état dans
onError
fonction pour éviter l'infini rappels,le code ressemblera à ceci :-
OriginalL'auteur Nitesh Ranjan
Rencontré un problème similaire et la meilleure solution que j'ai pu trouver était Georgii Oleinikov's réponse. (Ne nécessite pas de se faire de nouveaux
imageLoadError
état comme suggéré par Nitesh Ranjan dans sa réponse)e.target.onerror = null
n'est pas nécessaire (et n'aide pas vraiment), car la si la condition est suffisante pour éviter la boucle infinie(si la sauvegarde de l'image ne parvient pas à charger).Donc:
EDIT: L'autre façon est de définir un indicateur à l'extérieur du retour crochets et vérifier le drapeau de l'instruction if. Le Code devrait ressembler à quelque chose comme ceci:
OriginalL'auteur Saurabh Chauhan
@DepH la réponse est agréable, mais il ne se produire, et la boucle infinie si votre source d'erreur ne se charge pas. Cela m'a aidé à éviter le rappel de la boucle:
e.target.onerror = null
est inutile. Encore, cela doit être accepté de répondre.OriginalL'auteur Georgii Oleinikov
Pour ceux comme moi qui voulais aussi changer le style de l'élément et/ou de modifier l'img, il suffit de faire quelque chose comme ceci:
Espère que cela aide!
OriginalL'auteur Gustavo Garcia
c'est ce que j'utilise actuellement.
OriginalL'auteur Mrinmay
C'est la façon dont je l'ai fait.
OriginalL'auteur Matthias Liszt
Vous pouvez utiliser
object
si c'est ok avec vos besoins. Quelque chose comme ci-dessous fonctionnent parfaitement bienVérifier cette réponse pour plus de détails
https://stackoverflow.com/a/29111371/1334182
OriginalL'auteur S4beR
cela fonctionne pour moi .
étudiant est le nom de mon tableau et noimage l'image, quand il n'y a aucune image ne s'affiche.
OriginalL'auteur Yasir Akbar