Can't get src of img (JS, Jquery)

Question

I have some table.

            <table>                
            <tr>
                <td>1</td>
                <td><img src="uploads/0/58.gif"></td>
                <td>Name 1</td>
                <td>8</td>
            </tr>
            
            <tr>
                <td>2</td>
                <td><img src="uploads/0/25.gif"></td>
                <td>Name2</td>
                <td>5</td>
            </tr>
            </table>

Need to get src of all images from table. I'm doing some replaces in table, so var tbl = $('table').html();

After replaces, I need to get src-s: I really don't know how to write it, like $(tbl + 'tr').each.... So I write:

       $('table tr').each(function(index){ 
            let tds = $(this).find('td'); // get array td-s
            console.log(typeof(tds.html())) // Object
            console.log(tds[1]) // <td><img src="uploads/0/58.gif"></td>
            //$('img').src // error
            //$('img').getAttribute('src') // error,
            //$(this).find('img').src // error
            //ets...
        }); 

I try somethink like

or $(this).find('img) // == Object, i can't get src from

Answer 1

You could use a more complete selector:

$('table td > img[src]').each(function(i, e) { }); 

Or for all images in the page with a source, it would look like this:

$('img[src]').each(function(i, e) { console.log(e.src); });

You might want to read up on CSS selectors:)

Answer 2

A very simple solution based on your tried examples is:

console.log(tds[1].firstChild.src);

To get result inside a loop:

$('table tr').each(function(index){ 
    console.log(tds[1].firstChild.src);
});