JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='mylist'>
<li id='1'><img src='kids.jpg'>kids.jpg</li>
<li id='2'><img src='apple.jpg'>apple.jpg</li>
<li id='3'><img src='toys.jpg'>toys.jpg</li>
<li id='4'><img src='love.jpg'>love.jpg</li>
</ul>

JavaScript

$(document).ready( function( ) {

    var items = $("#mylist > li").detach().get( ); 
    
    items.sort( imgSrcSort );
    $("#mylist").append( items );


    function imgSrcSort( a, b ) {

        var _a = $(a).children("img").prop("src").toUpperCase();
        var _b = $(b).children("img").prop("src").toUpperCase();
    
        if( _a > _b ) return 1;
        if( _a < _b ) return -1;
        return 0;
    }
});