Télécharger et afficher le fichier image via des balises d'entrée dans réagissent-redux

0

La question

J'ai une balise d'entrée à l'intérieur d'un composant qui télécharge un singe de l'image.

<input 
      type="file"
      accept=".png,.jpeg"
      onChange={e => dispatch(setProfileImage(e.target.files[0]))}
/>

De ce que je peux voir, l'image est enregistrée dans l'état après que je l'envoi d'une action et l'enregistrer à l'état par l'intermédiaire d'un réducteur.

Mon problème est le suivant: Dans un autre composant, j'ai accès à l'image en l'état, via useSelector et de l'utiliser comme source dans une balise image, mais l'image semble rompu. En gros, je veux juste être en mesure d'utiliser l'image enregistrée dans l'état comme la source d'une balise d'image.

Aucune explication, tutoriel, ou le lien sera grandement appréciée. J'essaie d'éviter d'utiliser le backend que l'application que je suis en train de travailler sur est très petit et il n'est pas nécessaire pour un, mais je suis disposé à faire si c'est la réponse la plus facile.

Merci!!!!

file-upload image react-redux reactjs
2021-11-22 09:05:55
1

La meilleure réponse

1

créer une url pour l'image de la mettre dans src de la balise img :

   const ImageUrl =  URL.createObjectURL(file);

ou

<img src={URL.createObjectURL(file)}  alt={file.name} />
2021-11-22 09:27:16

Ai-je besoin d'importer quoi que ce soit ou tout simplement faire c'est suffisant?
notacoder

oui et j'ai édité ma réponse .il peut vous aider.
Samira

Samira

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................