View Image in JavaScript

As the user Máttheus Spoo pointed out, there is a syntax error in the creation of your table with image, when you put 2 signs " the javascript "understands" that you are closing your string, so to get around this you must use single quotation marks, that is put in the string parts of your html that will be inserted 'string aqui!' .

Then your code would look like this:

$(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                if(data[0][0] == 'BS56EF'|| data[0][0] == 'FP56EA' || data[0][0] == 'FS56EB' || data[0][0] == 'FS56EB'){
                    "<th class='text-center col-lg-1'> <img src='" + data[0][0] + ".png'/></th>" +
                }


                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";
                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td>" + data[i][1] + "</td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
});

But as mentioned in the comment, this example resolves your image error, but it does not resolve the error you mentioned: "Required String parameter 'ClientPage parameter' is not present".

This is an information difference error received by backend , ie it expects a data type and you are sending another type.

I was able to put the images instead of the code using only the javascript follows the resolution of the problem, because if anyone is experiencing something like that, it can solve.

 $(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                    "<th class='text-center col-lg-1'>" + data[0][0] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";


                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td> <img src= /images/produtos/" + data[i][1] + ".png /></td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
}); 

No I have added

"<td> <img src= /images/produtos/" + data[i][1] + ".png /></td>" +

In my project I have a images / products folder with all the images I use in the project.