Adding user-uploaded Images - Step 2 - Rendering base64 encoded images on a view

Once the image has been uploaded to the database pulling that information and displaying it on the screen is simply a matter of understanding base64 encoded data. Base64 encoding data is a way of converting binary data into text data which makes it easier to process in html.

This example will present an icon-sized image beside each member's details in a table on the member/show page. The bootstrap img-responsive class controls the size of the image and center-block ensures it appears centered. The size of the image displayed displayed can be easily adjusted using the height and width attributes. To add in the image into the list of members modify the view in resources/views/member/table.blade.php

Add a new table header

    <th>Member Image</th>

Then add the following

        <td>
            <img class="img-responsive center-block" height="200" width="100" 
                src="data:image/jpeg;base64,{{$member->memberimage}}">
        </td>

Now when you look a the list of members in http://localhost:8000/members, you will see each member's picture beside their image (provided an image has been uploaded)