Hoe kan ik een afbeelding weergeven die is opgeslagen als bytearray in HTML/JavaScript?

Ik schrijf een webpagina in HTML/JavaScript. Ik download een afbeelding van mijn backend met AJAX. De afbeelding wordt weergegeven als een onbewerkte bytearray, niet als een URL, dus ik kan de standaard <img src="{url}">-aanpak niet gebruiken.

Hoe toon ik de genoemde afbeelding aan de gebruiker?

Antwoord 1, autoriteit 100%

Probeer dit HTML-fragment in uw weergegeven document te plaatsen:

<img id="ItemPreview" src="">

Vervolgens kunt u aan de JavaScript-kant het src-kenmerk van de afbeelding dynamisch wijzigen met het zogenaamde Data-URL.

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

Als alternatief, jQuery gebruiken:

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

Hierbij wordt ervan uitgegaan dat uw afbeelding is opgeslagen in PNG-indeling, wat behoorlijk populair is. Als u een ander afbeeldingsformaat gebruikt (bijv. JPEG), wijzig dan de MIME typ("image/..."deel) in de URL dienovereenkomstig.

Vergelijkbare vragen:

• Een bytearray als afbeelding weergeven met JavaScript

• Bytes weergeven als afbeeldingen op een .aspx-pagina

• ‘data:image/jpg ;base64’ en jQuery afbeeldingsvoorbeeld in Internet Explorer

• Converteren van binaire gegevens naar een afbeeldingsbesturingselement in ASP.NET

• Hoe converteer ik een bytearray naar een afbeelding?