Displaying generated PNG in PHP?

So I'm trying to get a generated UPC bar code to display on an index page. but all it does is output the PNG contents instead of displaying the PNG itself. I'm not quite sure why its doing this. I'm guessing its some silly little thing i need to add but I have no clue what it would be. So any help would be appreciated.

INDEX CODE

    <form method="POST">
<head>UPC Barcode and QRcode Generator</head><br>
<label for="">Type 11 Didgits Here => </label>
<input type="text" class="form-control" name="text_code">
<button type="submit" class="btn btn-primary" name="generate">Generate</button>
<hr>
<?php
//QR CODE
if(isset($_POST['generate'])){
$code = $_POST['text_code'];
echo "<img src='https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=$code&choe=UTF-8'>";}
//Barcode
include "generate.php";
$upc = new BC(null,4);
$number = $_POST['text_code'];
$upc->build($number);
echo "*".substr($code, 0,6)."#".substr($code, 6,6)."*";
?>

GENERATE CODE

<?php
class BC{//
    private $height;
    private $width;
    private $barheight;
    private $barwidth;
    private $lable;
    private $border;
    private $padding;
    private $mapcode;
    private $rightmap;
    private $code;
    function __construct($lable=null,$barwidth=2) {//
        $this->set_width($barwidth);
        $this->set_lable($lable);
        $this->padding = $barwidth*5;
        $this->border =2;
        $this->mapcode = array
        ('0' => '0001101', '1' => '0011001', '2' => '0010011', '3' => '0111101', '4' => '0100011',
         '5' => '0110001', '6' => '0101111', '7' => '0111011', '8' => '0110111', '9' => '0001011',
         '#' => '01010', '*' => '101');
        $this->rightmap = array
        ('0' => '1110010', '1' => '1100110', '2' => '1101100', '3' => '1000010', '4' => '1011100',
         '5' => '1001110', '6' => '1010000', '7' => '1000100', '8' => '1001000', '9' => '1110100',
         '#' => '01010', '*' => '101');
    }
public function set_width($barwidth) {//
        if(is_int($barwidth)) {//
            $this->barwidth = $barwidth;
        }
        else{//
            $this->barwidth = 2;
        }
    }
public function set_lable($lable) {//
        if(is_null($lable)) {//
            $this->lable = "none";
        }
        else{//
            $this->lable = $lable;
            }
        }
public function build($code = null) {//
        if(is_null($code)) {//
            $this->code = "00000000000";
        }
        else{//
            $this->code = $code;
            }

        $this-> code = substr($code, 0, 11);

        if(is_numeric($code)){//
            $checksum = 0;
            for($digit = 0; $digit < strlen($code); $digit++) {
                if($digit%2 == 0) {//
                    $checksum += (int)$code[$digit] * 3;
                }
                else{//
                    $checksum += (int) $code[$digit];
                }
            }
            $checkdigit = 10 - $checksum % 10;
            $code .= $checkdigit;
            $code_disp = $code;
            $code = "*".substr($code, 0,6)."#".substr($code, 6,6)."*";
            $this->width = $this-> barwidth*95 + $this->padding*2;
            $this->barheight = $this->barwidth*95*0.75;
            $this->height = $this->barwidth*95*0.75 + $this->padding*2;
            $barcode = imagecreatetruecolor($this->width, $this->barheight);
            $black = imagecolorallocate($barcode, 0, 0, 0);
            $white = imagecolorallocate($barcode, 255, 255, 255);
            imagefill($barcode, 0, 0, $black);
            imagefilledrectangle($barcode, $this->border, $this->width - $this->border, -1, $this->barheight - $this->border - 1, $white);
            $bar_pos = $this->padding;
            for($count = 0; $count < 15; $count++) {
                $character = $code [$count];
                for($subcount = 0; $subcount < strlen($this->mapcode[$character]); $subcount++) {//
                    if($count < 7) {
                        $color = ($this->mapcode[$character][$subcount] == 0) ? $white : $black;
                        }
                        else{
                        $color = ($this->rightmap[$character][$subcount] == 0) ? $white : $black;
                        }
                    if(strlen($this->mapcode[$character]) == 7) {
                        $height_offset = $this->height * 0.05;
                    }
                    else {
                        $height_offset = 0;
                        }
                        imagefilledrectangle($barcode, $bar_pos, $this->padding, $bar_pos+$this->barwidth - 1, $this->barheight - $height_offset - $this->padding, $color);
                        $bar_pos += $this->barwidth;
                        }
                        imagepng($barcode);
                    }
                }
            }
        }
?>

So this is the output

after adding the new code

Solution

To display an image in an HTML page, you need to use an <img /> tag. To display image contents in an <img /> tag, you need to use a Data URI Scheme.

You'll end up with something like this:

echo '<img src="data:image/png;base64,', base64_encode($the_png_contents), '" />';