I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here