Asked  7 Months ago    Answers:  5   Viewed   39 times

I am creating a lightweight, single-file database administration tool and I would like to bundle some small icons with it. What is the best way to embed images in a HTML/PHP file?

I know a method using PHP where I would call the same file with a GET parameter that would output hardcoded binary data with the correct header, but that seems a bit complicated.

Can I use something to pass the image directly in a CSS background-image declaration? This would allow me to utilize the CSS sprite technique.

Browser support isn't an issue here, so more exotic methods are welcome also.

EDIT

Does someone have a link/example to how to generate Data URL's properly with PHP? I'd figure echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png')) would suffice but I could be wrong.

 Answers

85

A solution to embed an image directly in an HTML page would be to use the data URI scheme

For instance, you could use some portion of HTML that looks like this :

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

There are other solutions on the wikipedia page I linked to :

  • including the image as a CSS rule
  • Using some Javascript.

But note those solutions will not work on all browsers -- up to you to decide whether this is acceptable or not, in your specific situation.


Edit : to answer the question you asked about "how to generate Data URL's properly with PHP", take a look a bit lower in the wikipedia page about the Data URI scheme, which gives this portion of code (quoting) :

function data_uri($file, $mime) 
{  
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents); 
  return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" />
Wednesday, March 31, 2021
 
mdevils
answered 7 Months ago
93

Given all your data downloaded to my computer, I can convert it to png using ImageMagick 6.9.10.82 Q16 Mac OSX Sierra that calls Inkscape 0.92.4 as the SVG renderer.

convert right.inside.svg x.png


enter image description here

You have not shown the correct result. So I do not know if this is correct or not. But it does appear to be correct given the images in the assets folder.

However, the mask and other image needs to be accessible from whomever is trying to view the svg file. So either the data needs to be downloaded or perhaps you need to provide the URL to those files on some server that has the svg file.

Saturday, May 29, 2021
 
kwichz
answered 5 Months ago
13

As you are aware, everything passed as email message has to be textualized.

  • You must create an email with a multipart/mime message.
  • If you're adding a physical image, the image must be base 64 encoded and assigned a Content-ID (cid). If it's an URL, then the <img /> tag is sufficient (the url of the image must be linked to a Source ID).

A Typical email example will look like this:

From: foo1atbar.net
To: foo2atbar.net
Subject: A simple example
Mime-Version: 1.0
Content-Type: multipart/related; boundary="boundary-example"; type="text/html"

--boundary-example
Content-Type: text/html; charset="US-ASCII"

... text of the HTML document, which might contain a URI
referencing a resource in another body part, for example
through a statement such as:
<IMG SRC="cid:foo4atfoo1atbar.net" ALT="IETF logo">

--boundary-example
Content-Location: CID:somethingatelse ; this header is disregarded
Content-ID: <foo4atfoo1atbar.net>
Content-Type: IMAGE/GIF
Content-Transfer-Encoding: BASE64

R0lGODlhGAGgAPEAAP/////ZRaCgoAAAACH+PUNv
cHlyaWdodCAoQykgMTk5LiBVbmF1dGhvcml6ZWQgZHV
wbGljYXRpb24gcHJvaGliaXRlZC4A etc...

--boundary-example--

As you can see, the Content-ID: <foo4atfoo1atbar.net> ID is matched to the <IMG> at SRC="cid:foo4atfoo1atbar.net". That way, the client browser will render your image as a content and not as an attachement.

Hope this helps.

Tuesday, June 1, 2021
 
CodeCaster
answered 5 Months ago
46

What you need to do is encode the file to Base64, and include it like this:

<img src="data:image/gif;base64,R0lGODlhUAA..(the rest of your base64 encoded file)..">

http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

http://dean.edwards.name/weblog/2005/06/base64-ie/

Wednesday, August 11, 2021
 
Jeremy Pare
answered 3 Months ago
26

Well, at least for images you could use curl... As I've pointed out in the comments, you may create a php file (say, my.php) containing something like the following:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://example.com/?password=4444&login=1111');
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_BINARYTRANSFER,1);
$picture = curl_exec($ch);
curl_close($ch);
//Display the image in the browser
header('Content-type: image/jpeg');
echo $picture;

and than just write:

 <img src='my.php'>

P.S. Although I believe it is NOT the best way to do things, it looks like it solves the problem. No more private data in img src. I have never anything alike with video formats, but as for images it seems quite easy. You can read more about curl here: http://php.net/manual/en/book.curl.php

Thursday, August 19, 2021
 
aaronhuisinga
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :