Append <img> to <tbody> with JavaScript

Question

I have an AJAX call, and on success, a HTML <img> element is appended to the tbody .

Here is the code:

for (var i = 0; i <= list.length - 1; i++) {
    var patientsList = ' <td class="point">' +
        (i+1) +
        '</td>' +
        '<td class="title"> ' +
        list[i].dateOfBirthday +
        '</td>' +
        '<td class="title"> ' +
        list[i].lastName +
        '</td>' +
        '<td class="title"> ' +
        list[i].firstName +
        '</td>' + '<td>' + '</td>'
        + '<td>' + '</td>'
        + '<td>' + '</td>'
        + '<td style="text-align:end;>' + ' <img src="~/images/doc 50.png" />'+ '</td>';

    $("#patients").append('<tr>' + patientsList + '</tr>');
};

The problem is, the image does not appear in the table.

The path is correct.

Why is it not appending?

Answer 1

Path is not correct. Try ./ instead of ~/ .

Answer 2

Your image name contains whitespace: doc 50.png . Try to rename the file and replace the code with something like this:

<img src="./images/doc-50.png" />'

And if your images folder is at the same level as the file, which code you have provided, use ./ , not ~/ .