Showing image in KR Table output

Niall McGuirk commented on Oct 1, 2021

Hi, I've got a table which shows data from a database query. In a column there is an image name. I'm trying to find a way to display the image in the column of the table.

Here is the output at present

This is what I want to achieve, a small image shown in the row

I've tried to alter my code to concatenate the img tag into the sql to show the image. It hasn't worked. So I'm trying to find another way to do it. I've managed to get the hardcoded location in the file system to show, but can't think of a way to show it as an image in the output.

Here is my code from MyReport.php

$this->src('dealhackdb')
        ->query("Select 
                 -- tbl_dealhack.id,
                 -- tbl_profile.user_id AS UserID,
                 -- tblprofile.Picture
                 CONCAT('../images/',tbl_profile.Profile_Image) AS 'Profile Image',
                //below causes an error, but is what I tried
                 -- CONCAT('<img width='100' src='../../images/',tbl_profile.Profile_Image) AS 'Profile Image',
                 tbl_user.firstname AS 'First Name',
                 tbl_user.surname AS 'Surname',
                 hack_description AS Decription,
                 created_date AS 'Created',
                 attachment_location AS 'Attachment Location',
                 uploaded_date AS Uploaded ,
                 Company,
                 TribeName AS 'Tribe Name'
                 From tbl_dealhack
                 left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
                 left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
                 Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
                 left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
                 left join tbl_category on tbl_category.id = tbl_dealhack.category_id
                 left join tbl_user on tbl_profile.user_id = tbl_user.id
                 WHERE 1=1
                 AND attachment_type_id = 4
                 
                 "
                .(($this->params["startDatePicker"]!=array())?"AND uploaded_date BETWEEN (:start) ":"").""
                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
                .((($this->params["select"]!='Any'))?"AND TribeName LIKE (:tribe) ":"").""
                .((($this->params["dealhack"]!='Any'))?"AND category = (:dealhack) ":"").""
                .((($this->params["locationSelector"]!='Any'))?"AND attachment_location LIKE (:location) ":"").""
                .((($this->params["companySelector"]!='Any'))?"AND Company LIKE (:company) ":"").""
                .((($this->params["user"]!=''))?"AND email = (:user) ":"").""
               )
        ->params($query_params)
        ->pipe($this->dataStore("sales"));

Sebastian Morales commented on Oct 4, 2021

You can select the image name only in your sql query and build the img html with Map process like this:

$this->src("mySrc")
->query($query)
->pipe(new \koolreport\processes\Map(array(
    "{value}" => function($row) {
        $row["Profile Image"] = "<img width='100' src='../../images/" . $row["Profile Image"] . "/>";
        return $row
    }
)))

Now your "Profile Image" column contains the img tag with path to profile image instead of just image name. Let us know if there's any issue. Tks,

Niall McGuirk commented on Oct 4, 2021

Is there a way to implement that with my current code? As how would I use the filters as it works currently? It says I haven't defined $query, atm. Is there a way to simply put the image row onto the front on the sql query. I'm using input filters in the sales query, so I need to keep that functionality, while adding the image to the table.

It says that the Map process allows you to add rows to the array. So is it possible to add the output from the sales Datastore to the Map array, then display the Map output? Would the filters still work in that case?

I'm just showing data using the sales dataStore, in MyReport.view.

<?php
        DataTables::create(array(
        "dataSource"=>$this->dataStore("sales"),
        "options"=>array(
            "paging"=>true),
        "themeBase"=>"bs4", // Optional option to work with Bootsrap 4
        "cssClass"=>array(
            "table"=>"table table-striped table-bordered "
        )
        ));

For reference, here is the MyReport.php code:

<?php
//Step 1: Load KoolReport
require_once "../../load.koolreport.php";

//Step 2: Creating Report class
class MyReport extends \koolreport\KoolReport
{
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;

    protected function defaultParamValues()
    {
        $date=date_create("2021-07-16");
        date_add($date,date_interval_create_from_date_string("-42 days"));
        $sd = date_format($date,"Y-m-d");
        
        return array(
            "startDatePicker"=>date($sd . " 00:00:00"),
            "endDatePicker"=>date("Y-m-d 23:59:59"),
            "select"=>"",
            "locationSelector"=>"",
            "dealhack"=>"",
            "user"=>"",
            "companySelector"=>"",
        );
        
//        return array(
//            "years"=>array(2003),
//            "customerNames"=>array(),
//            "productLines"=>array(),
//        );
    }
    
    protected function bindParamsToInputs()
    {
        return array(
            "startDatePicker",
            "endDatePicker",
            "select",
            "locationSelector",
            "dealhack",
            "user",
            "companySelector"
        );
        
//        return array(
//            "years",
//            "customerNames",
//            "productLines"
//        );
    }

    protected function settings()
    {
        
        $config = include "../../config.php";
        return array(
            "dataSources"=>$config
        );
        

    }
    protected function setup()
    {
        //Debug show all param values
//         var_dump($this->params); echo "<br>";    
        
        $query_params = array();
        if($this->params["startDatePicker"]!=array()){
            $query_params[":start"] = $this->params["startDatePicker"];
            }
        if($this->params["endDatePicker"]!=array()){
            $query_params[":end"] = $this->params["endDatePicker"];
            }
        if (($this->params["select"]!="Any")){
            $query_params[":tribe"] = $this->params["select"];
            }
        if (($this->params["dealhack"]!="Any")){
            $query_params[":dealhack"] = $this->params["dealhack"];
            }
        if (($this->params["user"]!="")){
            $query_params[":user"] = $this->params["user"];
            }
        if (($this->params["locationSelector"]!="Any")){
            $query_params[":location"] = $this->params["locationSelector"];
            }
        if (($this->params["companySelector"]!="Any")){
            $query_params[":company"] = $this->params["companySelector"];
            }
//        if (! empty($this->params["select"])){
//            $query_params[":tribe"] = $this->params["select"];
//            }

        $this->src('dealhackdb')
        ->query("Select 
                 -- tbl_dealhack.id,
                 -- tbl_profile.user_id AS UserID,
                 -- tblprofile.Picture
                 tbl_user.firstname AS 'First Name',
                 tbl_user.surname AS 'Surname',
                 hack_description AS Decription,
                 created_date AS 'Created',
                 attachment_location AS 'Attachment Location',
                 uploaded_date AS Uploaded ,
                 Company,
                 TribeName AS 'Tribe Name'
                 From tbl_dealhack
                 left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
                 left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
                 Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
                 left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
                 left join tbl_category on tbl_category.id = tbl_dealhack.category_id
                 left join tbl_user on tbl_profile.user_id = tbl_user.id
                 WHERE 1=1
                 AND attachment_type_id = 4
                 
                 "
                .(($this->params["startDatePicker"]!=array())?"AND uploaded_date BETWEEN (:start) ":"").""
                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
                .((($this->params["select"]!='Any'))?"AND TribeName LIKE (:tribe) ":"").""
                .((($this->params["dealhack"]!='Any'))?"AND category = (:dealhack) ":"").""
                .((($this->params["locationSelector"]!='Any'))?"AND attachment_location LIKE (:location) ":"").""
                .((($this->params["companySelector"]!='Any'))?"AND Company LIKE (:company) ":"").""
                .((($this->params["user"]!=''))?"AND email = (:user) ":"").""
               )
        ->params($query_params)
        ->pipe($this->dataStore("sales"));
        // GROUP BY year, productLine, customerName
        
        
        //display image from Profile table
        $this->src("dealhackdb")
        ->query($query) //$query undefined
        ->pipe(new \koolreport\processes\Map(array(
            "{value}" => function($row) {
                $row["Profile Image"] = "<img width='100' src='../../images/" . $row["Profile Image"] . "/>";
                return $row;
                }
)));

//        .((! empty($this->params["select"]))?"AND TribeName LIKE (:tribe) ":"").
//        .(($this->params["startDatePicker"]!=array())?"AND created_date BETWEEN (:start) ":"").""
//                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
//                .(($this->params["select"]!=array())?"AND TribeName LIKE (:tribe) ":"").
//        
    }
}

Sebastian Morales commented on Oct 5, 2021

I used $query just to simplify the code. You could fill in your real query:

        $this->src('dealhackdb')
        ->query("Select 
                 -- tbl_dealhack.id,
                 -- tbl_profile.user_id AS UserID,
                 -- tblprofile.Picture

                 tbl_profile.Profile_Image AS 'Profile Image', -- get the profile image name as it is

                 tbl_user.firstname AS 'First Name',
                 tbl_user.surname AS 'Surname',
                 hack_description AS Decription,
                 created_date AS 'Created',
                 attachment_location AS 'Attachment Location',
                 uploaded_date AS Uploaded ,
                 Company,
                 TribeName AS 'Tribe Name'
                 From tbl_dealhack
                 left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
                 left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
                 Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
                 left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
                 left join tbl_category on tbl_category.id = tbl_dealhack.category_id
                 left join tbl_user on tbl_profile.user_id = tbl_user.id
                 WHERE 1=1
                 AND attachment_type_id = 4
                 
                 "
                .(($this->params["startDatePicker"]!=array())?"AND uploaded_date BETWEEN (:start) ":"").""
                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
                .((($this->params["select"]!='Any'))?"AND TribeName LIKE (:tribe) ":"").""
                .((($this->params["dealhack"]!='Any'))?"AND category = (:dealhack) ":"").""
                .((($this->params["locationSelector"]!='Any'))?"AND attachment_location LIKE (:location) ":"").""
                .((($this->params["companySelector"]!='Any'))?"AND Company LIKE (:company) ":"").""
                .((($this->params["user"]!=''))?"AND email = (:user) ":"").""
               )
        ->params($query_params)

        //add the Map process after the query and params methods                
        ->pipe(new \koolreport\processes\Map(array(
            "{value}" => function($row) {
                $row["Profile Image"] = "<img width='100' src='../../images/" . $row["Profile Image"] . "/>"; //construct the profile image img tag with src path
                return $row;
            }
        ))); 

        ->pipe($this->dataStore("sales"));

Niall McGuirk commented on Oct 5, 2021

I've entered your above code and It works, However, for some reason it is moved every column to the left, and is displaying the first column in the Image box.

Joshua etc.. should be in the first name, but its in the image column, and the whole last column is empty, when it should contain London for example. The image field should only have the image in it.

Does it not see the Image as data for some reason, so it adds the firstname column?

Sebastian Morales commented on Oct 6, 2021

The column order depends on your select query. Just move the field order according to your like. I don't know exactly which column of yours is the correct one for building image path so pls use the following code and change the column name in this code:

        ->pipe(new \koolreport\processes\Map(array(
            "{value}" => function($row) {
                $row["Profile Image"] = "<img width='100' src='../../images/" . $row["Profile Image"] . "' >"; //change "Profile Image" to the column name that is your real image name.
                return $row;
            }
        )));

By the way, your changed column order is because I added a column to the beginning of your query. Just move that added column to the end of your query to fix it. Pls post your DataTables' create code as well.

Niall McGuirk commented on Oct 6, 2021

I've resolved the column problem. However, I can't get an images to show on the page. The images in the table don't display, and I put an <img> tag in the MyReport.view. php directly, and it shows the image on the page, but the profile_Image's don't. But the same <img> tag worked on a .html file in the same directory.

I've pasted my DataTables code below.

Images not displaying

Test Image showing, with table images displaying

MyReport.php

<?php
//Step 1: Load KoolReport
require_once "../../load.koolreport.php";

//Step 2: Creating Report class
class MyReport extends \koolreport\KoolReport
{
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;

    protected function defaultParamValues()
    {
        $date=date_create("2021-07-16");
        date_add($date,date_interval_create_from_date_string("-42 days"));
        $sd = date_format($date,"Y-m-d");
        
        return array(
            "startDatePicker"=>date($sd . " 00:00:00"),
            "endDatePicker"=>date("Y-m-d 23:59:59"),
            "select"=>"",
            "locationSelector"=>"",
            "dealhack"=>"",
            "user"=>"",
            "companySelector"=>"",
        );
        
//        return array(
//            "years"=>array(2003),
//            "customerNames"=>array(),
//            "productLines"=>array(),
//        );
    }
    
    protected function bindParamsToInputs()
    {
        return array(
            "startDatePicker",
            "endDatePicker",
            "select",
            "locationSelector",
            "dealhack",
            "user",
            "companySelector"
        );
        
//        return array(
//            "years",
//            "customerNames",
//            "productLines"
//        );
    }

    protected function settings()
    {
        
        $config = include "../../config.php";
        return array(
            "dataSources"=>$config
        );
        

    }
    protected function setup()
    {
        //Debug show all param values
//         var_dump($this->params); echo "<br>";    
        
        $query_params = array();
        if($this->params["startDatePicker"]!=array()){
            $query_params[":start"] = $this->params["startDatePicker"];
            }
        if($this->params["endDatePicker"]!=array()){
            $query_params[":end"] = $this->params["endDatePicker"];
            }
        if (($this->params["select"]!="Any")){
            $query_params[":tribe"] = $this->params["select"];
            }
        if (($this->params["dealhack"]!="Any")){
            $query_params[":dealhack"] = $this->params["dealhack"];
            }
        if (($this->params["user"]!="")){
            $query_params[":user"] = $this->params["user"];
            }
        if (($this->params["locationSelector"]!="Any")){
            $query_params[":location"] = $this->params["locationSelector"];
            }
        if (($this->params["companySelector"]!="Any")){
            $query_params[":company"] = $this->params["companySelector"];
            }
//        if (! empty($this->params["select"])){
//            $query_params[":tribe"] = $this->params["select"];
//            }

//        $this->src('dealhackdb')
//        ->query("Select 
//                 -- tbl_dealhack.id,
//                 -- tbl_profile.user_id AS UserID,
//                 -- tblprofile.Picture
//                 tbl_profile.Profile_Image,
//                 tbl_user.firstname AS 'First Name',
//                 tbl_user.surname AS 'Surname',
//                 hack_description AS Decription,
//                 created_date AS 'Created',
//                 attachment_location AS 'Attachment Location',
//                 uploaded_date AS Uploaded ,
//                 Company,
//                 TribeName AS 'Tribe Name'
//                 From tbl_dealhack
//                 left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
//                 left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
//                 Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
//                 left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
//                 left join tbl_category on tbl_category.id = tbl_dealhack.category_id
//                 left join tbl_user on tbl_profile.user_id = tbl_user.id
//                 WHERE 1=1
//                 AND attachment_type_id = 4
//                 
//                 "
//                .(($this->params["startDatePicker"]!=array())?"AND uploaded_date BETWEEN (:start) ":"").""
//                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
//                .((($this->params["select"]!='Any'))?"AND TribeName LIKE (:tribe) ":"").""
//                .((($this->params["dealhack"]!='Any'))?"AND category = (:dealhack) ":"").""
//                .((($this->params["locationSelector"]!='Any'))?"AND attachment_location LIKE (:location) ":"").""
//                .((($this->params["companySelector"]!='Any'))?"AND Company LIKE (:company) ":"").""
//                .((($this->params["user"]!=''))?"AND email = (:user) ":"").""
//               )
//        ->params($query_params)
//        ->pipe($this->dataStore("sales"));
//        // GROUP BY year, productLine, customerName
        
        
        //display image from Profile table using Map (unfinished)
        $this->src('dealhackdb')
        ->query("Select 
                 -- tbl_dealhack.id,
                 -- tbl_profile.user_id AS UserID,
                 -- tblprofile.Picture
                 tbl_profile.Profile_Image AS 'Profile Image', -- get the profile image name as it is
                 -- tbl_profile.Profile_Image AS FileName,
                 tbl_user.firstname AS 'First Name',
                 tbl_user.surname AS 'Surname',
                 hack_description AS Decription,
                 created_date AS 'Created',
                 attachment_location AS 'Attachment Location',
                 uploaded_date AS Uploaded ,
                 Company,
                 TribeName AS 'Tribe Name'
                 From tbl_dealhack
                 left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
                 left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
                 Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
                 left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
                 left join tbl_category on tbl_category.id = tbl_dealhack.category_id
                 left join tbl_user on tbl_profile.user_id = tbl_user.id
                 WHERE 1=1
                 AND attachment_type_id = 4
                 
                 "
                .(($this->params["startDatePicker"]!=array())?"AND uploaded_date BETWEEN (:start) ":"").""
                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
                .((($this->params["select"]!='Any'))?"AND TribeName LIKE (:tribe) ":"").""
                .((($this->params["dealhack"]!='Any'))?"AND category = (:dealhack) ":"").""
                .((($this->params["locationSelector"]!='Any'))?"AND attachment_location LIKE (:location) ":"").""
                .((($this->params["companySelector"]!='Any'))?"AND Company LIKE (:company) ":"").""
                .((($this->params["user"]!=''))?"AND email = (:user) ":"").""
               )
        ->params($query_params)

        //add the Map process after the query and params methods                
        ->pipe(new \koolreport\processes\Map(array(
            "{value}" => function($row) {
                $row["Profile Image"] = "<img width='25' src='/../..' " . $row["Profile Image"] . "alt='Row Image' />"; //construct the profile image img tag with src path
                return $row;
            }
        )))

        ->pipe($this->dataStore("sales"));

//        .((! empty($this->params["select"]))?"AND TribeName LIKE (:tribe) ":"").
//        .(($this->params["startDatePicker"]!=array())?"AND created_date BETWEEN (:start) ":"").""
//                .(($this->params["endDatePicker"]!=array())?" AND (:end) ":"").""
//                .(($this->params["select"]!=array())?"AND TribeName LIKE (:tribe) ":"").
//        
    }
}

MyReport.view.php: DataTables Create Code as requested

<?php
    use \koolreport\datagrid\DataTables;
    use \koolreport\inputs\DateTimePicker;
    use \koolreport\widgets\koolphp\Table;
    use \koolreport\inputs\Select2;
    use \koolreport\inputs\TextBox;
?>
<div class="report-content">
    <div class="text-center">
        <h1>Dealhack Links</h1>
        <p class="lead">
            The example demonstrate how to build dynamic reports with multiple data filters
        </p>
    </div>
<!--    Filters Form-->
    <form method="post">
       <div class="col-md-12 form-group">
        <div class="row">
            <div class="col-md-6">
                
<!--                    <b>Select Years</b>-->
                   <b>Start Date</b>
                    <?php 
                    
                    DateTimePicker::create(array(
                            "name"=>"startDatePicker",
                            "maxDate"=>"@endDatePicker",
                            "format"=>"DD/MM/YYYY HH:mm",
                            "themeBase"=>"bs4",
                        ));
                    
                    

                    ?>
                </div>    
  
                <div class="col-md-6">
<!--                    <b>Select Product Lines</b>-->
                   <b>End Date</b>
                    <?php 
                    
                    DateTimePicker::create(array(
                            "name"=>"endDatePicker",
                            "minDate"=>"@startDatePicker",
                            "format"=>"DD/MM/YYYY HH:mm",
                            "themeBase"=>"bs4",
                        ));
                    
                    

                    ?>                
                </div>
            </div> <!--FROM & TO DATE ROW end-->
            
<!--            SECOND ROW, TRIBE & LOCATION FILTERS-->
        <div class="row">
            <div class="col-md-6"> <!--TRIBE COL-->
                <div class="form-group">
                    <b>Tribe</b>
                    <?php 

    Select2::create(array(
                    "name"=>"select",
//                                  "dataStore"=>$this->dataStore("sales"),
                    "dataSource"=>$this->src("dealhackdb")->query("
                    select 'Any' AS 'Tribe Name'
                    UNION
                    Select distinct
                     TribeName AS 'Tribe Name'
                     From tbl_dealhack
                     left join tbl_dealhack_attachments on tbl_dealhack_attachments.dealhack_id = tbl_dealhack.id
                     left join tbl_profile on tbl_profile.user_id = tbl_dealhack.user_id
                     Left join tbl_attachment_type on tbl_attachment_type.id = tbl_dealhack_attachments.attachment_type_id
                     left join tbl_companytribe on tbl_companytribe.id = tbl_profile.TribeID
                     
                    
                ")->params(
                    $this->params["startDatePicker"]!=array()?
                    array(":start"=>$this->params["startDatePicker"]):
                    array(),
                    $this->params["endDatePicker"]!=array()?
                    array(":end"=>$this->params["endDatePicker"]):
                    array()
                ),
                    "dataBind"=>"Tribe Name",
                    "attributes"=>array(
                        "class"=>"form-control",
                    )
                ));

            //        place above params bit for filters to be enable           
//                    ".( $this->params["startDatePicker"]!=array()?"WHERE created_date BETWEEN (:start) ":"")."
//                    ".(($this->params["endDatePicker"]!=array())?" AND (:end) ":"")."
//                            AND attachment_type_id = 4  
//                            group by TribeName

            ?>              
                </div>  
            </div> <!--TRIBE COL end-->
            
    <div class="col-md-6">
             <B>  URL Location:</B>
                <?php
                    Select2::create(array(
                            //if i change this select to location, it causes the redirect error
                            "name"=>"locationSelector",
//                          "dataStore"=>$this->dataStore("sales"),
                            "dataSource"=>$this->src("dealhackdb")->query("
                            select 'Any' AS 'Attachment Location'
                            UNION
                            SELECT distinct attachment_location AS 'Attachment Location'
                            FROM dealhack.tbl_dealhack_attachments 
                            WHERE attachment_type_id = 4;


                        ")->params(
                            $this->params["startDatePicker"]!=array()?
                            array(":start"=>$this->params["startDatePicker"]):
                            array(),
                            $this->params["endDatePicker"]!=array()?
                            array(":end"=>$this->params["endDatePicker"]):
                            array()
                        ),
                                "dataBind"=>"Attachment Location",
                                "attributes"=>array(
                                    "class"=>"form-control",
                                )
                            ));

                ?>

                </div> 
            
            </div>    <!--2nd Row end-->
        
            <div class="row">
<!--               3rd Row Filters-->
                
    <div class="col-md-6">
          <b> Dealhack Type:</b>
            <?php
                Select2::create(array(
                        //if i change this select to location, it causes the redirect error
                        "name"=>"dealhack",
//                      "dataStore"=>$this->dataStore("sales"),
                        "dataSource"=>$this->src("dealhackdb")->query("
                        select 'Any' AS 'Dealhack Type'
                        UNION
                        SELECT category AS 'Dealhack Type'
                        FROM dealhack.tbl_category;


    ")->params(
        $this->params["startDatePicker"]!=array()?
        array(":start"=>$this->params["startDatePicker"]):
        array(),
        $this->params["endDatePicker"]!=array()?
        array(":end"=>$this->params["endDatePicker"]):
        array()
    ),
        "dataBind"=>"Dealhack Type",
        "attributes"=>array(
            "class"=>"form-control",
        )
    ));

            ?>

            </div> 
                
                
          <div class="col-md-6">
          <b> Company:</b>
                    <?php
                        Select2::create(array(
                                //if i change this select to location, it causes the redirect error
                                "name"=>"companySelector",
//                              "dataStore"=>$this->dataStore("sales"),
                                "dataSource"=>$this->src("dealhackdb")->query("
                                select 'Any' AS 'Company'
                                UNION
                                SELECT distinct Company AS Company
                                FROM dealhack.tbl_profile;


            ")->params(
                $this->params["startDatePicker"]!=array()?
                array(":start"=>$this->params["startDatePicker"]):
                array(),
                $this->params["endDatePicker"]!=array()?
                array(":end"=>$this->params["endDatePicker"]):
                array()
            ),
                "dataBind"=>"Company",
                "attributes"=>array(
                    "class"=>"form-control",
                )
            ));

            ?>

            </div> 
            </div> <!-- 3rd Row filters End-->
                      
            <div class="row">
<!--               4th Row Filters-->
                

          <div class="col-md-6">
          <b> User:</b>
                    <?php
                                     
                TextBox::create(array(
                        "name"=>"user",
                        "attributes"=>array(
                        "class"=>"form-control",
                        "placeholder"=>"Enter Exact Email"
                        )
                ));
                                     
                                     
                                     
//                        Select2::create(array(
//                                //if i change this select to location, it causes the redirect error
//                                "name"=>"user",
////                              "dataStore"=>$this->dataStore("sales"),
//                                "dataSource"=>$this->src("dealhackdb")->query("
//                                select '' AS 'User'
//                                UNION
//                                SELECT concat(firstname,' ',  surname) AS User FROM dealhack.tbl_user WHERE firstname IS NOT NULL OR surname IS NOT NULL;
//
//                            ")->params(
//                                $this->params["startDatePicker"]!=array()?
//                                array(":start"=>$this->params["startDatePicker"]):
//                                array(),
//                                $this->params["endDatePicker"]!=array()?
//                                array(":end"=>$this->params["endDatePicker"]):
//                                array()
//                            ),
//                "dataBind"=>"User",
//                "attributes"=>array(
//                    "class"=>"form-control",
//                )
//            ));

            ?>

            </div> 
                
                
            </div><!-- 4th Row Filters End-->
                       
            
        </div> <!--1st Form-Group (under post) end--> 
                
                <div class="form-group">
                    <button class="btn btn-primary">Submit</button>
                </div>    
            
        
    </form>
    
<!--    <img src="/../../img/download.png" alt="TEST IMAGE"> -->
<!--This image displays in the page, but the images in the query do not, despite being in the same directory-->

    
<!--    TABLE-->
    <?php
        DataTables::create(array(
        "dataSource"=>$this->dataStore("sales"),
        "options"=>array(
            "paging"=>true),
        "themeBase"=>"bs4", // Optional option to work with Bootsrap 4
        "cssClass"=>array(
            "table"=>"table table-striped table-bordered "
        )
        ));
    
    ?>
</div>

Sebastian Morales commented on Oct 7, 2021

It's probably this line of code:

    $row["Profile Image"] = "<img width='25' src='/../..' " . $row["Profile Image"] . "alt='Row Image' />";

It should be:

    $row["Profile Image"] = "<img width='25' src='/../../" . $row["Profile Image"] . "' alt='Row Image' />";
    echo "image path = " . $row["Profile Image"] . "<br>"; //add this echo line to check if the img html tag is correct

Niall McGuirk commented on Oct 7, 2021

I've added it, here is the output now. does this mean its just outputting the name of the file, not the path to it?

image path = <image not loaded icon> image path = <image not loaded icon> image path = <image not loaded icon> image path = <image not loaded icon> image path = <image not loaded icon> image path = <image not loaded icon> image path = <image not loaded icon>

In case screen shot doesn't load

Niall McGuirk commented on Oct 7, 2021

For some reason I can't get the screen shot to display here. But I'll leave it here just in case.

Sebastian Morales commented on Oct 7, 2021

You have to make sure this path construction is correct:

    src='/../../" . $row["Profile Image"] . "'

This is an absolute path (because it starts with "/"). If you meant a relative path from the current page the path must begin with "." (current directory) or ".." (parent directory).

Niall McGuirk commented on Oct 7, 2021

I've checked the path, going through it with cmd even. It does lead to the images folder. It should be correct from the code's directory, as ../../../img/.

However, I think it might be a problem with something else because the alt text doesn't appear in the Table next to the image icon. So surely it mustn't be a problem with the file because if it can't find the file it would add the 'Row Image' to the Profile Image field in the table, wouldn't it?

As Here, I've changed the path, and it shows the image icon, with the alt text. But the Table images have no alt text showing. So I don't think it is a path problem.

Showing Table images with out alt text showing

Sebastian Morales commented on Oct 8, 2021

Niall, pls right mouse click on the failed img tag, choose Inspect element to see its html and see why it failed. In case you don't see anything wrong pls post the img html for us to check for you if you.

Niall McGuirk commented on Oct 8, 2021

I've checked the html. Thanks for the inspect element tip. I had to add a space before the alt tag. So now it shows the alt text for each image. But the html is leaving a space and the file name outside the speech marks.

Here is the code at present:

->pipe(new \koolreport\processes\Map(array(
            "{value}" => function($row) {
                $row["Profile Image"] = "<img width='100' src='../../../img/'" . $row['Profile Image'] . " alt='Row Image' />"; 
                echo "image path = " . $row["Profile Image"] . "<br>"; //add this echo line to check if the img html tag is correct//construct the profile image img tag with src path
                return $row;
            }
        )))

Sebastian Morales commented on Oct 8, 2021

Be careful with constructing the image src path. Yours is a wrong one. Pls try this:

    $row["Profile Image"] = "<img width='100' src='../../../img/" . $row['Profile Image'] . "' alt='Row Image' />"; // wrap the single quote after $row['Profile Image'] instead of before it.

Niall McGuirk commented on Oct 8, 2021

Thanks a lot for the help. It now works, and shows the images.

KoolReport's Forum

Showing image in KR Table output #2366

Build Your Excellent Data Report