# Image will not load when dynamically added using JS

**URL:** <https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517>\
**Category:** Technical Support\
**Created:** [January 17, 2025, 8:58pm UTC](https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517 "2025-01-17T20:58:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aman\_Sariya](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Aman\_Sariya](https://forum.8thwall.com/u/Aman_Sariya)\
**Post date:** [January 17, 2025, 8:58pm UTC](https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517/1 "2025-01-17T20:58:10Z")

</div>

In my AR experience, I want a textbox to open up when I tap a hotspot. This textbox needs to present images with information. Snippet form my HTML is as follows:

```auto
<div id="container" class="collapsed">
  <div class="outer">
    <div id="closeButton" onclick="hideAll()">Close</div>
  </div>
  <div class="outer" id="contents"></div>
</div>

```

I want to dynamically add the innerHTML for this div id=“contents” from my tap-hotspot.js. Here is the HTML snippet for a hotspot:

```auto
<a-entity
    id="model"
    gltf-model="#campusModel"
    scale="0.5 0.5 0.5"
    visible="false"
    shadow="receive: false"
    xrextras-hold-drag
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    reflections="type: realtime">
    <a-entity id="ActivitiesAndLandmarks" visible="true">
      <!--Hotspot #1-->
      <!-- id NEEDS TO MATCH THE KEY IN hotspotDescriptions -->
      <a-entity
        id="JCSU"
        mixin="hotspot-target"
        position="-0.5 1.3 -0.3"
        rotation="0 0 0"
        scale="1 1 1"
        look-at="#camera"
        class="cantap"
        tap-hotspot>
        <!-- id NEEDS TO MATCH THE format: "{a-entity id}-child" -->
        <!-- value needs to be whatever you want the title to be in the text -->
        <a-text
          id="JCSU-child"
          value="Joe Crowley Student Union"
          align="center"
          mixin="hotspot-text"
          visible="false"
          tap-close></a-text>
      </a-entity>

```

I am trying to dynamically add the text and images to this textbox based on which hotspot is clicked. The text shows up just fine but the images just show up as placeholders. Here is my tap-hotspot.js:

```auto
const tapHotspotComponent = {
  init() {
    const id = this.el.getAttribute('id')
    const contents = document.getElementById('contents')
    const container = document.getElementById('container')
    const childElement = document.getElementById(`${id}-child`)
    
    const hotspotDescriptions = {
      MIKC: [
        {type: 'text', content: 'Looking for help with research or just a comfortable place to study?'},
        {type: 'image', content: 'assets/mikc_1.jpg'},
        {type: 'text', content: 'Completed in 2008, the Mathewson-IGT Knowledge Center features the technology, spaces, and services you need. Computing and information technologies and support are combined with the latest in multimedia tools and the resources of the University library in a physical environment designed for comfort, efficiency and collaboration.'},
      ],
.........

    const handleClickEvent = (e) => {
      container.classList.remove('collapsed')
      childElement.setAttribute('visible', true)
      childElement.setAttribute('class', 'cantap')

      this.el.sceneEl.emit('dismissPrompt2')

      const title = childElement.getAttribute('value')

      const sections = hotspotDescriptions[id] || [{type: 'text', content: 'No additional information available.'}]
      let contentHTML = `<h3>${title}</h3>`

      // Loop through sections to construct content
      sections.forEach((section) => {
        if (section.type === 'text') {
          contentHTML += `<p>${section.content}</p>`
        } else if (section.type === 'image') {
          console.log(section.content)
          contentHTML += `<img src="${section.content}" alt="Hotspot Image" />`
          // contentHTML += '<img src="assets/mikc_1.jpg" alt="MIKC" />'
        }
      })

      contents.innerHTML = contentHTML

      // Dynamic plane resizing based on text length
      const textLength = title.length
      const planeWidth = Math.max(1.6, textLength * 0.12) // Adjust multiplier as needed

      // Adjust the plane dynamically
      childElement.setAttribute('geometry', `primitive: plane; width: ${planeWidth}; height: 0.4`)

      this.el.setAttribute('material', 'color: rgb(5, 44, 255)') // Highlight selected hotspot
      window.lastSelectedHotspot = this.el

      setTimeout(() => {
        const handleOutsideClick = (event) => {
          if (!container.contains(event.target) && !this.el.contains(event.target)) {
            hideAll()
            this.el.sceneEl.emit('showPrompt3')
            window.removeEventListener('click', handleOutsideClick)
          }
        }
        window.addEventListener('click', handleOutsideClick)
      }, 100)
    }

    this.el.addEventListener('click', handleClickEvent, true)
  },
}

export {tapHotspotComponent}

```

I tried statically loading an image directly from HTML and it loads just fine using this line within my div id=“contents”:

```auto
<img src="assets/mikc_1.jpg" alt="MIKC" />

```

Here is my folder structure:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/d/db72dd74f5f58ac07d05d259cb0fe3d2c69451ec.png)

Why am I not able to see my images when I update it from my tap-hotspot.js?

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [January 17, 2025, 9:53pm UTC](https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517/2 "2025-01-17T21:53:06Z")

</div>

Try wrapping the asset path with `require()`:

> [@How to make a panel with images?](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/8):
>
> When you’re referencing assets from JS, you’ll want to require() the asset, rather than just using the path as a string, so that it resolves the assets at build time. Something like this should work: \<img src="{$require('./assets/tesla-mini.jpg'}" ...\>

---

<div class="post-metadata">

**Author:** ![Aman\_Sariya](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Aman\_Sariya](https://forum.8thwall.com/u/Aman_Sariya)\
**Post date:** [January 17, 2025, 10:55pm UTC](https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517/3 "2025-01-17T22:55:09Z")

</div>

This worked! Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [January 21, 2025, 10:55pm UTC](https://forum.8thwall.com/t/image-will-not-load-when-dynamically-added-using-js/4517/4 "2025-01-21T22:55:11Z")

</div>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.