So zeigen Sie gepufferte Bilder an

Question

Ich erstelle eine "Bild laden" -Komponente in ReactJS. Meine Komponente speichert ein geladenes Bild im Speicher und sendet es an einen Knotenserver, der npm "file-loader" verwendet.

Das Bild erreicht den Server als Puffer <Buffer 89 12 00 .... >

werde ich versuchen, den Puffer zu einer MySQL, zu retten, aber dann das Bild als Miniaturansicht im Browser angezeigt werden müssen, wenn die DB Einsatz erfolgreich war.

Wie kann ich ein gepuffertes Bild im Browser anzeigen?

Answer 1

Die Lösung, die ich mit gegangen war, den Puffer zu Base64 zu verwandeln und es mit einem <img /> Tag anzuzeigen:

const buffer = someData // e.g., <Buffer 89 50 4e ... > 
const b64 = new Buffer(buffer).toString('base64') 
const mimeType = some_type // e.g., image/png 

Da ist in meinem React Komponente mache ich einen Image-Tag als solche:

<img src={`data:${mimeType};base64,${b64}`} /> 

Mehr hier: https://css-tricks.com/data-uris/