How to display image with selected dropdown in PHP, AJAX and JQuery

Question

This involves PHP, AJAX, JQuery. Hopefully this is an easy question.

I have a dynamic dropdown menu that displays content when the dropdown is selected. The content i am trying to display is an image. I am using two tables - One is my table for teams, and the other table is for my logos.

team

|id|name |
|--| --- |
|1 | MTL |
|2 | BOS |
|3 | CGY |
|4 | EDM |

gallery

|id|name      |**filename**  |
|--| ---      |              |
|1 | Montreal |habs-svg.svg  |
|2 | Boston   |bruins-svg.svg|
|3 | Calgary  |flames-svg.svg|
|4 | Edmonton |oilers-svg.svg|

It works perfectly. When I select MTL in dropdown menu from 'team' for example, it will display the corresponding file name in text format which is 'habs-svg.svg'. So all my Jquery and AJAX is working great.

How can i get the actual image to display instead of the image name? Please see code below for my index.php, getJS.js & getlogo.php:

**index.php**
<div class="container">
    <h2>Drop-down Selection Data Load with ajax, PHP & MySQL</h2>       
    <div class="page-header">
        <h3>
            <select id="employee" class="form-control" >
                <option value="" selected="selected">Select Employee Name</option>
                <?php
                $sql = "SELECT id, name FROM team";
                $resultset = mysqli_query($conn, $sql);
                while( $rows = mysqli_fetch_assoc($resultset) ) { 
                ?>
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["name"]; ?></option><?php } ?>
            </select>
        </h3>   
    </div>  
    <div class="hidden" id="errorMassage"></div>
    <table class="table table-striped hidden" id="recordListing">
        <thead>
          <tr>
            <th>Team Name</th>
            <th>Logo</th>
          </tr>
        </thead>
        <tbody>
          <tr> //My images that are dynamically printing will show here 
            <td id="empName"></td>
            <td id="empFileName"></td>
          </tr>
        </tbody>            
    </table>       
</div>

**getJS.js**
$(document).ready(function () {
  $("#employee").change(function () {
    var id = $(this).find(":selected").val();
    var dataString = "empid=" + id;
    $.ajax({
      url: "getlogo.php",
      dataType: "json",
      data: dataString,
      cache: false,
      success: function (empData) {
        if (empData) {
          $("#errorMassage").addClass("hidden").text("");
          $("#recordListing").removeClass("hidden");
          $("#empId").text(empData.id);
          $("#empName").text(empData.name);
          $("#empFileName").text(empData.filename);
        } else {
          $("#recordListing").addClass("hidden");
          $("#errorMassage").removeClass("hidden").text("No record found!");
        }
      },
    });
  });
});

**getlogo.php**
<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
    $sql = "SELECT name, filename 
    FROM gallery 
    WHERE id='".$_REQUEST['empid']."'";
    $resultSet = mysqli_query($conn, $sql); 
    $empData = array();
    while( $emp = mysqli_fetch_assoc($resultSet) ) {
        $empData = $emp;
    }
    echo json_encode($empData);
} else {
    echo 0; 
}
?>

I know how to insert images using PHP, but I feel it has something to do with my AJAX specifically on this line:

$("#empFileName").text(empData.filename);

So far it seems as if I need to use 'attr' instead of 'text'? I tried this below but did not seem to work:

$("#empFileName").attr("filename", empData.filename);

Thank you in advance!