JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div data-check-background-image style="background-image: url(https://fakeimg.pl/250x100/f3c150/);">11111</div>
<br />
<div data-check-background-image class="bgimage">22222</div>
<br />
<div id="theimages"></div>

CSS

.bgimage {
  width: 250px;
  height: 100px;
  background-image: url(https://fakeimg.pl/250x100/000000/);
}

JavaScript

/*
!IMPORTANT - .map() looks like .each(), but there is a key difference:

.each() performs an action on each of the elements in the collection; the return value of the callback passed to .each() is used to determine whether or not the iteration continues.

.map() also performs an action on each of the elements in the collection, but the callback's return value is used to generate an element in the array-like object returned by .map().

jQuery obects are array-like, but they are not arrays! The reason that you call .get() at the end of the .map() call is to turn that jQuery object into a true array. The elements of that array are the values returned by the callback.
*/
//
//	GET BACKGROUND IMAGE USING .CSS( BACKGROUND-IMAGE ) - STRIP URL()
//
var myArr = $( '[data-check-background-image]' ).map( function( v, i ) {
	return $(this).css( 'backgroundImage' ).replace( /url\(|\)/g, '' ).replace(/"/g, "");
}).get();

alert( myArr );

//if ( false )
$.each( myArr,function( i, v) {

  $( '<img>', {
    src:		v,
    alt:		v,
    title:	v
  }).appendTo( '#theimages' );

});