How to Display Base64 Images in Html

How to display Base64 images in HTML

My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.

<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

How to display base64 encoded image in html

You can use a data URI:

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=">

How to display Base64 image on browser

You are doing great, also you have structured your AllPhotos React functional component very well, just use it, I have tried and tested it.

AllPhotos.js

import React from 'react';


const AllPhotos = (props) => {

const url1 = "data:image/jpg;base64,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";
const url2 = "data:image/jpg;base64,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";

const urls = [url1, url2]; // your array of photo urls, which you'll get by props
const images = urls.map((url,index) => (<img key={index} src={url} className='singlePhoto' />));


return (
<div>
{images}
</div>
);
}

export default AllPhotos;

How can I display image encoded in base64 format in Angular 6?

You don't use "this" to refer the variables defined in the component "ts" file. Remove "this" may solve your problem.

Please Review this stackbliz Fiddle. Look inside the app component to see the implementation.

StackBlitz

How to display images in cshtml page after joining two path and converting to base64 in mvc?

You should use img tag.

HTML Sample Image 1

HTML Sample Image

Sample Code:

<div>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/png;base64,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' />
</div>

Your function:

$.ajax({
type: 'GET',
url: '@Url.Action("GetImageList")',
datatype: JSON,
data: {
'TaskID': $("#tasklist").val() //getting selected TaskID from dropdown
},
success: function (data) {
var row_no = 1;
$.each(data, function (i, item) {

+ "<td id='ItemId" + row_no + "' >" + item.ID + "</td>" // displaying image id in html table

"<td>"
+ "<div><img id='Image" + row_no + "' src='data:image/png;base64,iVBORw0KGgo.../> </div></td > "
});

Embedding Base64 Images

Update: 2017-01-10

Data URIs are now supported by all major browsers. IE supports embedding images since version 8 as well.

http://caniuse.com/#feat=datauri


Data URIs are now supported by the following web browsers:

  • Gecko-based, such as Firefox, SeaMonkey, XeroBank, Camino, Fennec and K-Meleon
  • Konqueror, via KDE's KIO slaves input/output system
  • Opera (including devices such as the Nintendo DSi or Wii)
  • WebKit-based, such as Safari (including on iOS), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome
  • Trident

    • Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB in Version 8[3].
    • Data URIs are supported only for the following elements and/or attributes[4]:

      • object (images only)
      • img
      • input type=image
      • link
    • CSS declarations that accept a URL, such as background-image, background, list-style-type, list-style and similar.
    • Internet Explorer 9: Internet Explorer 9 does not have 32KiB limitation and allowed in broader elements.
    • TheWorld Browser: An IE shell browser which has a built-in support for Data URI scheme

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support



Related Topics



Leave a reply



Submit