Odovzdanie a zobrazenie obrázkových súborov cez cez vstupné značku v reagovať-redux

0

Otázka

Mám textu značku vnútri komponentu, ktorý odovzdá singe obrázok.

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

Z toho, čo vidím, obraz sa ukladá v štáte po tom, čo som odoslanie akcie a uložte ho do stavu, cez redukčný ventil.

Môj problém je tento: V inej zložky, I prístup k obrazu v štáte, cez useSelector a použiť ju ako zdroj obrazu značku, ale obraz sa javí nefunkčné. V podstate, ja len chcem byť schopní použiť obrázok uložený v stave ako zdroj obrazu značku.

Akékoľvek vysvetlenie, návod alebo odkaz byť veľmi ocenil. Snažím sa vyhnúť pomocou backendu ako použitie pracujem na veľmi malé a nie je potrebné pre jeden, ale som ochotný, ak je to najjednoduchšia odpoveď.

Ďakujeme!

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

Najlepšiu odpoveď

1

vytvorenie adresy url pre obraz dať do src img značky :

   const ImageUrl =  URL.createObjectURL(file);

alebo

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

Potrebujem na import nič, alebo jednoducho to je dosť?
notacoder

áno a ja upravené moja odpoveď .to vám môže pomôcť.
Samira

Samira

V iných jazykoch

Táto stránka je v iných jazykoch

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