Use image asset from List in Custom Code Block

Hey! I’m trying to get images from a list to display at a different part of the page.
I got as far as using querySelectorAll() to create a node list element , but extracting the background-image:url got me stuck.

window.addEventListener('block-loaded-imgs', function () 
const images = [];
    setTimeout(() => 
    const listItems = document.querySelectorAll('#imgs *');
   // for listItems.getElementsByClassName('static-image');
   console.log("staticImages " +document.querySelectorAll('staticImage'))
    let text = $(this).text();

        const listArray = Array.from(listItems)
     //   console.log (listArray[9].getElementsByClassName("static-image"));
            for (const image of listArray) 

Can anybody point me in the right direction?

Hay @BenWyatt, you can use the code bellow to pick the images from a list and add them to a custom code block. You nee to paste this code in your page settings → Custom code → Footer section and replace the BLOCKID with your block name:

window.addEventListener('DOMContentLoaded', () => {
window.addEventListener('block-loaded-list6', () => {
	window.addEventListener('get-records-list6', () => {
		let images = [...document.querySelectorAll('#list6 .static-image')].map((image)=>{
		    return window.getComputedStyle(image).backgroundImage;
		     if(images.length > 0){
                	let imageDiv = document.createElement('div');
        = image;
		}, 1000)

.new-image {
	width: 200px;
	height: 200px;

also you need to have this div in your custom code block

<div id='images' class="w-100 d-flex justify-content-center align-items-center text-center" style='gap: 8px'></div>