Solution 1 :

If the image is always going to be in the third column, you could do something like this.

i !== 0 is telling the browser to ignore the first row.
j === 2 is telling the browser to render the third column differently.

If the image won’t always be in column 3 you could parse each string value and see if it is a image URL, but if this works it works.

      if (i!==0 && j===2) {
        row.append($("<td><img src='" + cellData + "'/></td>"));
        return
      }
    });
function arrayToTable(tableData) {
  var table = $("<table></table>");
  $(tableData).each(function (i, rowData) {
    var row = $("<tr></tr>");
    $(rowData).each(function (j, cellData) {
      if (i!==0 && j===2) {
        row.append($("<td><img src='" + cellData + "'/></td>"));
        return
      }
      row.append($("<td>" + cellData + "</td>"));
    });
    table.append(row);
  });
  return table;
}
$.ajax({
  type: "GET",
  url: "./img.csv",
  success: function (data) {
    $("body").append(arrayToTable(Papa.parse(data).data));
  }
});

Solution 2 :

give an id to your table:

var Table = $('<table id="my-table"></table>');

then create an image element with the address you already have in the cell:

$('#my-table tr').each(function( index ) {
    var img_url = $( this ).children("td:last").text();
    var img_element = $(document.createElement('img'))
    img_element.attr('src', img_url);
    $( this ).children("td:last").html(img_element);
});

Below you can run an example with sample data:

function arrayToTable(tableData) {
  var table = $('<table id="my-table"></table>');
  $(tableData).each(function(i, rowData) {
    var row = $('<tr></tr>');
    $(rowData).each(function(j, cellData) {
      row.append($('<td>' + cellData + '</td>'));
    });
    table.append(row);
  });
  return table;
}

$('body').append(arrayToTable([["asdf","qwer","https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"]]));


$('#my-table tr').each(function( index ) {
    var img_url = $( this ).children("td:last").text();
    var img_element = $(document.createElement('img'))
    img_element.attr('src', img_url);
    $( this ).children("td:last").html(img_element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Problem :

I wanted the HTML table to show a specific image from its path given in the file.

csv file:
enter image description here

HTML Page output:
enter image description here

HTML code which I’m currently using.

<script>
    function arrayToTable(tableData) {
        var Table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');           
                $(rowData).each(function (j, cellData) {
                    row.append($('<td>'+cellData+'</td>'));
                });
     table.append(row);
        });
        return Table;
    }
    $.ajax({
            type: "GET",
            url: "./img.csv",
            success: function (data) {
                    $('body').append(arrayToTable(Papa.parse(data).data));
     }
   });
</script>

I applied this script because every time I will have a variable number of rows and columns, but how to modify this script so that it will read the image address given in the col 3 and fetch those images from their path and put them in the table.

Comments

Comment posted by whoacowboy

@vibhusharma No problem, was the answer correct?

Comment posted by whoacowboy

@vibhusharma Awesome, can you mark the question correct then?

By