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>
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
How can I display embedded Base64 encoded images in Outlook email
The background-image
property from CSS is unsupported in Outlook. You can read more about that in the following series of articles:
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can add a web reference to any external image or just add an embedded image instead, for example:
Set objOL = CreateObject("Outlook.Application")
Set objMail = objOL.CreateItem(olMailItem)
objMail.Attachments.Add "C:\pictest.jpg"
objMail.HTMLBody = "<html><p>This is a picture.</p>" & _
"<img src='cid:pictest.jpg' height=480 width=360>"
objMail.Display
See To add an embedded image to an HTML message for more information.
Embed a base64-encoded image at the bottom of HTML file
Inspired by this answer, it is possible to specify image contents via CSS using the all-purpose content
attribute.
I do not know which browsers support this behaviour, although I strongly suspect most modern ones do.
Example modified from that answer:
<img src="#" class="myImage" />
<style type="text/css">
.myImage {
content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
}
</style>
Placing style elements in the body is illegal in HTML4, and dubious in HTML 5. However, every browser I know of supports it.
Remember that having inline images in HTML documents comes with some massive downsides, most prominently impaired cacheability.
base64 encoded images in email signatures
Important
My answer below shows how to embed images using data URIs. This is useful for the web, but will not work reliably for most email clients. For email purposes be sure to read Shadow2531's answer.
Base-64 data is legal in an img
tag and I believe your question is how to properly insert such an image tag.
You can use an online tool or a few lines of code to generate the base 64 string.
The syntax to source the image from inline data is:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
http://en.wikipedia.org/wiki/Data_URI_scheme
Send a base64 image in HTML email
Support, unfortunately, is brutal at best. Here's a post on the topic:
https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/
And the post content:
Use a base64 embedded image multiple times
If you can use CSS, you could place it there instead, as a class.
Then just add the class to the elements you want.
Base64 images to gmail in Delphi
At first i thought the issue is this : PCFET0NUWVBFIGh0bWwgUFVCTElDICItL
since it does not look like base64 code of png which starts with iVBOR.
But the issue was here : Content-ID: qrcode.png
When setting Content-ID you have to be carefull since in some versions simply setting it with quotation marks is not enough and you have to set it with adding <> like so : Content-ID: <qrcode.png>
.
With this the result was as wanted.
Related Topics
Open an Exe File Through a Link in a HTML File
Angular - Show Empty Row by Default in Drop Down List and Disable Button
How to Playback Mkv Video in Web Browser
Prevent Child Div from Overflowing Its Parent Container When Resizing the Page
How to Align Two Submit Button on Same Line
How to Hide an HTML Table Row <Tr> So That It Takes Up No Space
How to Limit the Maximum Files Chosen When Using Multiple File Input
How to Make Div Have 100% Height of Parent, Independent of Children'S Size? Complex Layout
How to Make CSS Grid Items Take Up Remaining Space
Material Design - Stepper How to Remove/Disable Steps
How to Resize Image in Bootstrap Carousel
Chrome User Agent Stylesheet Overwriting My Site Style
Select Country Dropdown in HTML Page
How to Remove Indentation from an Unordered List Item
How to Get the File Path from HTML Input Form in Firefox 3
How to Disable a Link Using Only Css
Is There a ≪Meta≫ Tag to Turn Off Caching in All Browsers