D3 - How to append an <img> to a <td> using an each function

I'm new to d3, and I'm trying to append an image to a specific table cell using d3. I'm using an each function to iterate through my data where each data element is associated with a td. For the last data element I want to add an image.

Through searching I've found some code that works for adding a p element, but I can't seem to adapt it for an image. What I really don't understand is why I can change the background color of the cell in one line, but I can't append an image element with the next. What am I doing wrong?

    var rows = tbody.selectAll("tr")
        .data(tableData, function(d) { return d.ID; });

    rows.enter()
        .append("tr")
        .selectAll("td")
        .data(function(d) { return columns.map(function(column) {
                return {column: column, value: d[column]};
            });
        })
        .enter()
        .append("td")
        .style("opacity", 0.0)
        .transition()
        .delay(1200)
        .duration(1000)
        .style("opacity", 1.0)
        .text(function(d) { return d.value; })
        .each(function(d, i) {
            if (i == 6) {
                d3.select(this).style("background-color", "red"); // works
                d3.select(this).selectAll("img")
                    .data(d.imgLink)
                    .enter()
                    .append("img"); // doesn't append an <img> anywhere
             }
         });