Broken images!

Hello, I am working on this custom html question, the images display fine in my preview but like broken images on the survey preview (adding in a screenshot). Does anyone know why this may be the case? I am also pasting my code below. 

1
2  <!-- Main Container with Background Image -->
3  <div style="position: relative; width: 600px; height: 600px; background-image: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VHOdoYnAyqTK5Lt'); background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid #ccc;">
4    <!-- Grid Cells -->
5    <div class="grid-cell" data-location="R1C1" style="position: absolute; top: 40px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;"> </div>
6    <div class="grid-cell" data-location="R1C2" style="position: absolute; top: 40px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
7    <div class="grid-cell" data-location="R1C3" style="position: absolute; top: 40px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
8    <div class="grid-cell" data-location="R2C1" style="position: absolute; top: 220px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
9    <div class="grid-cell" data-location="R2C2" style="position: absolute; top: 220px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
10    <div class="grid-cell" data-location="R2C3" style="position: absolute; top: 220px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
11    <div class="grid-cell" data-location="R3C1" style="position: absolute; top: 410px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
12    <div class="grid-cell" data-location="R3C2" style="position: absolute; top: 410px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
13    <div class="grid-cell" data-location="R3C3" style="position: absolute; top: 410px; left: 400px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;">&nbsp;</div>
14  </div>
15
16  <!-- Buttons Section -->
17  <div style="margin-top: 10px; text-align: center;">
18    <button data-item="breakfast" id="select-breakfast">Select Breakfast</button>
19    <button data-item="dinner" id="select-dinner">Select Dinner</button>
20  </div>
21
22  <!-- JavaScript for Button Actions -->
23  <script>
24    // Image URLs for test items
25    const breakfastImage = "https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_vrPsqekWIt26Rxt";
26    const dinnerImage = "https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWecqmidZuBBznx";
27
28    let selectedImage = null;
29
30    // Set the selected image based on the clicked button
31    document.getElementById("select-breakfast").addEventListener("click", function () {
32      selectedImage = breakfastImage;
33    });
34
35    document.getElementById("select-dinner").addEventListener("click", function () {
36      selectedImage = dinnerImage;
37    });
38
39    // Apply the selected image to the clicked grid cell
40    document.querySelectorAll(".grid-cell").forEach(cell => {
41      cell.addEventListener("click", function () {
42        if (selectedImage) {
43          this.innerHTML = `<img src="${selectedImage}" alt="Selected Item" style="width: 35%; height: 35%; object-fit: contain;">`;
44        } else {
45          alert("Please select an image first!");
46        }
47      });
48    });
49  </script>
50</body>
51</html>
52