Menu
Can someone help me display a Base 64 encoded image using vue.js?
Basically I have an image object:
img = { encodedImage: '/9x/4AFQSkZJRgABAXAASABIAAD...' } I know that in pure HTML i can do something like:
<div> <p>Taken from wikpedia</p> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> </div> In vue, i have tried the following:
<img :src="img.encodedImage" /> <img v-bind:src="img.encodedImage" /> <img :src="{{img.encodedImage}}" /> <img v-bind:src="{{img.encodedImage}}" /> Here's my full vue component:
<template> <div> <img :src="img.encodedImage"> </div> </template> <script> export default { props: [ 'img' ] } </script> Can someone help?
Thanks in advance!
335
Images encoded with Base64 can be embedded in HTML by using the <img> tag. This can help to increase the page load time for smaller images by saving the browser from making additional HTTP requests.
To get this to work, once your bytes are loaded into an Image class, Create a BytesIO object and then use this to save the image with the format to the BytesIO, i.e img. save(bt_ob, format="png"). This code will now work in the html in the "data:image/png;base64,<>" format.
data:image/png;base64 tells the browser that the data is inline, is a png image and is in this case base64 encoded. The encoding is needed because png images can contain bytes that are invalid inside a HTML document (or within the HTTP protocol even).
In vue.js, it'll look like:
<img v-bind:src="'data:image/jpeg;base64,'+imageBytes" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With