Adding pictures to choices in a text based adventure game

Question

Image shows the general idea of how i want them placed as i continue in the story I want to add images to every text id as you can see below. I tried multiple options but none have worked.

Tried many different options but i cant make it work. Let me know if you are confused. The text is written in my native language.

A few other people managed to solve this problem. I did try and do the same as them but it wouldnt work out for me.

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
const image = document.getElementById('illustration');
const backgroundMusic = new Audio('./sound/darkambience.mp3')

let state = {} 

function startGame() {
    state = {} 
    showTextNode(1)
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === 
    textNodeIndex)
    textElement.innerText = textNode.text
    while (optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild)
    }



    textNode.options.forEach(option => {
        if (showOption(option)) {
           const button = document.createElement('button')
           button.innerText = option.text
           button.classList.add('btn')
           button.addEventListener('click', () => selectOption(option))
           backgroundMusic.play()
           backgroundMusic.volume = 0.5
           backgroundMusic.loop = true
           optionButtonsElement.appendChild(button)
        }
    })
}

function showOption(option) {
    return true
}

function showImage(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
    image.style.backgroundImage="url(" + textNode.img + ")"
}


function selectOption(option) {
    const nextTextNodeId = option.nextText
    if (nextTextNodeId <= 0) { 
    return startGame()
   }
   state = Object.assign(state, option.setState)
   console.log('show: ' + JSON.stringify(state))
   showTextNode(nextTextNodeId)
   showImage(nextTextNodeId)
}

const textNodes = [
    {
        id:1,
        img:'hunter.jpg',
        text: 'Monsterjægeren',
        options: [
            {
                text: 'Start',
                nextText: 4
            },
            {
                text: 'Intro til historien',
                nextText: 3
            },
            {
                text: 'Hjælp',
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        img:'hunter2.jpg',
        text: 'Spillet spilles ved hjælp af musen, som trækkes hen over den svarmulighed, du vil gå med. Tryk derefter “venstre museklik" for at gå med den svarmulighed. Alle dine beslutninger får konsekvenser i historien. Bemærk: Spillet kan ikke gemmes af hensyn til exploits. ',
        options: [
            {
                text: 'Tilbage',
                nextText: 1
            }
        ]
    },

startGame()

*, *::before, *::after {
    box-sizing: border-box;
    font-family: ;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: WitcherFont;
}

div#illustration {
    box-sizing: content-box;
    margin: 20px auto;
    padding: 10px;
    max-width: 900px;
    width: 90%;
    min-height: 300px;
    background: url(../img/hunter2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.container {
    width: 850px;
    height: 600px;
    max-width: 100%;
    background-color: lightgrey;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px;
    color: lightgrey;
    opacity: .9;
}

.btn-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn {
    background-color: white;
    border-radius: 5px;
    border-color: lightgrey;
    padding: 5px 10px;
    outline: none;
    font-size: 14px;
    color: black;
}

.btn:hover {
    border-color: grey;
}

.text1 {
    text-align: center;
    font-size: 20px;
    color: black;
}
@font-face {
    font-family: WitcherFont;
    src: url(../font/PTC55F.ttf);
}

.stat {
    color: red;
    font-size: medium;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monsterjægeren</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js" defer></script>
</head>
<body>

    <div class="container">
        <div class="text1" id="text">Text</div>
        <div id="illustration"></div>
        <div id="option-buttons" class="btn-grid">
          <button class="btn">Option 1</button>
          <button class="btn">Option 2</button>
          <button class="btn">Option 3</button>
          <button class="btn">Option 4</button>
        </div>
        <div class="stat">Health: <strong><span id="healthText">100</span></strong></div>
    </div>
</body>
</html>