Using PHP function include() to include a png image

Question

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 :]

Answer 1

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.