Ok people, despite the best-known-practices, today I decided to do this:
<img src='<? include("dir/dir/img.png"); ?>'>
With 6 diferent .png images.
Sadly, only 2 of the 6 were nicely visible on the browser.
Why only 2 of the 6 images were shown? Maybe there were data losses bits on the way?
Thank you for your time :]
It does not work because src attribute of an <img> tag is not supposed to contain the raw data of an image; rather, it is supposed to contain a URI that points to the image data.
By using data: URIs, you can embed the image directly in your (X)HTML document. Note that this will not work in many browsers such as older versions of Internet Explorer. As well, there are limits, such as the 32KB limit IE8 places on data: URIs.
Using PHP, here's what your code would look like:
<img src='data:image/png;base64,<?php echo base64_encode(file_get_contents("dir/dir/img.png")); ?>'>
Don't forget to change the image/png part of the URL if the type of image that you are using changes. For example, if you use a GIF image, change it to image/gif.
That was not supposed to work at all.
For a standard way to do that (including images inline in the HTML document instead of pointing to their URL), see the data URI scheme.
file_get_contents to read a file instead of calling include. (included data is a security risk!)
<?. Not to mention, it will output immediately, so he cannot manipulate the data to build the data URI.include() tells PHP to parse that file. If, by any chance, it contains <?, you’ll be in real trouble. Instead, use readfile().
Additionally, Artefacto’s answer has to be considered as well.
< img src='< ?php echo 'data:image/png;base64,' . base64_encode(file_get_contents('dir/dir/img.png')) ; ?> ' >
