# How to make a panel with images?

**URL:** <https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480>\
**Category:** Technical Support\
**Created:** [February 27, 2024, 7:24pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480 "2024-02-27T19:24:17Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 7:24pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/1 "2024-02-27T19:24:17Z")

</div>

Hi, I’m making a button that when I press it, a panel appears and images with descriptions appear below but this appears:

 ![Screenshot 2024-02-26 at 13.23.23](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/e72e40bf4dfe9b28b331488514c1518f9fc997f4.png)

this code I’m using:

```auto
AFRAME.registerComponent('custom-panel', {
  init: function () {
    this.panel = document.createElement('div');
    this.panel.id = 'my-custom-panel';
    this.panel.style.position = 'fixed';
    this.panel.style.top = '0';
    this.panel.style.left = '0';
    this.panel.style.width = '100vw';
    this.panel.style.height = '100vh';
    this.panel.style.background = 'rgba(101, 78, 163, 1)';
    this.panel.style.color = 'white';
    this.panel.style.padding = '20px';
    this.panel.style.display = 'none';
    this.panel.style.zIndex = '9999';
    this.panel.innerHTML = `
      <div style="overflow-y: auto; height: 90%; margin: 5%;">
        <h2 style="text-align: center;">Galeria</h2>
        <div style="margin-bottom: 20px;">
          <img src="assets/tesla-mini.jpg" alt="Tesla" style="max-width: calc(100% - 40px); height: auto; display: block; margin: 10px auto;">
          <p style="text-align: center;">Sofá Retrátil</p>
        </div>
        <div style="margin-bottom: 20px;">
          <img src="assets/tesla-mini.jpg" alt="Sofá Retrátil" style="max-width: calc(100% - 40px); height: auto; display: block; margin: 10px auto;">
          <p style="text-align: center;">Sofá Retrátil</p>
        </div>
        <!-- Mais imagens e descrições conforme necessário -->
      </div>
    `;
    var button = document.createElement('button');
    button.innerText = 'Quais são os Sofas Retráteis?';
    button.style.position = 'fixed';
    button.style.top = '20px';
    button.style.right = '20px';
    button.style.zIndex = '10000';
    document.body.appendChild(button);
    document.body.appendChild(this.panel);
    button.onmouseover = function() {
      this.style.transform = 'scale(1.1)';
    };
    button.onmouseout = function() {
      this.style.transform = 'scale(1)';
    };
    this.panel.onmouseover = null;
    this.panel.onmouseout = null;
    button.addEventListener('click', () => {
      if (this.panel.style.display === 'none') {
        this.panel.style.display = 'block'; // Mostra o painel
        button.innerText = 'Voltar para experiência AR!'
      } else {
        this.panel.style.display = 'none';
        button.innerText = 'Quais são os Sofas Retráteis?'
      }
    });
  }
});

```

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [February 27, 2024, 8:04pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/2 "2024-02-27T20:04:16Z")

</div>

Hello @Miguel_Paula  
I would suggest referencing our quick tips video here:

[![](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/7c85970dc53fa725906ce0fb92048db5e1cddb74.jpeg "Quick Tips: Simple Button UI") ](https://www.youtube.com/watch?v=UB2BbLCsDmU)

Button interactions follow the same CSS, HTML and javascript rules of the web.

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 8:10pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/3 "2024-02-27T20:10:31Z")

</div>

Yes, I know that but I have a problem with the panel that appears when I click…  
the panel is without the image I want.

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [February 27, 2024, 8:16pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/4 "2024-02-27T20:16:44Z")

</div>

have you tried

`./assets/tesla-mini.jpg`

Or verified the correct asset path

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 8:22pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/5 "2024-02-27T20:22:49Z")

</div>

It hasn’t been the same yet.  
This is the right way, I tested everything but it didn’t work.

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [February 27, 2024, 8:41pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/6 "2024-02-27T20:41:00Z")

</div>

Can you specify what asset paths you have tested? More information would be helpful. Are you receiving any console errors?

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 8:50pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/7 "2024-02-27T20:50:15Z")

</div>

I’m not getting any errors but I made some changes, migrated part of the code to CSS.  
this is what the CSS looked like:

```auto
/* Styles for the panel */
#my-custom-panel {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(101, 78, 163, 1);
     color: white;
     padding: 20px;
     display: none; /* Initially hidden */
     z-index: 9999;
     overflow-y: auto;
}

#my-custom-panel div {
     margin: 5%;
     height: 90%;
}

#my-custom-panel h2 {
     text-align: center;
}

#my-custom-panel img {
     max-width: calc(100% - 40px);
     height: auto;
     display: block;
     margin: 10px auto;
}

#my-custom-panel p {
     text-align: center;
}

/* Styles for the button */
.custom-button {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     transition: transform 0.3s;
}

.custom-button:hover {
     transform: scale(1.1);
}

```

this is how the JS looked:

```auto
import './css.css'

AFRAME.registerComponent('custom-panel', {
   init: function () {
     // Create the panel
     this.panel = document.createElement('div');
     this.panel.id = 'my-custom-panel';
     this.panel.innerHTML = `
       <div>
         <h2>Gallery</h2>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Tesla">
           <p>Retractable Sofa</p>
         </div>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Retractable Sofa">
           <p>Retractable Sofa</p>
         </div>
         <!-- More images and descriptions as needed -->
       </div>
     `;

     // Create the button
     var button = document.createElement('button');
     button.innerText = 'What are Retractable Sofas?';
     button.className = 'custom-button';

     // Add the button to the body
     document.body.appendChild(button);

     // Add the panel to the body
     document.body.appendChild(this.panel);

     // Button click event to show/hide the panel
     button.addEventListener('click', () => {
       if (this.panel.style.display === 'none') {
         this.panel.style.display = 'block';
         button.innerText = 'Back to AR experience!';
       } else {
         this.panel.style.display = 'none';
         button.innerText = 'What are Retractable Sofas?';
       }
     });
   }
});

```

---

<div class="post-metadata">

**Author:** ![christoph\_nia](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/christoph_nia/32/83_2.png) [@christoph\_nia](https://forum.8thwall.com/u/christoph_nia)\
**Post date:** [February 27, 2024, 9:19pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/8 "2024-02-27T21:19:30Z")

</div>

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:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 10:48pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/9 "2024-02-27T22:48:41Z")

</div>

It’s still not working, it’s the same thing.  
Here’s a photo of what it looks like now:

 ![Screenshot 2024-02-27 at 19.47.20](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/c824fe2e351019243f60836da2bd8474ddba0ed3.png)

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 10:58pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/10 "2024-02-27T22:58:16Z")

</div>

I changed the `this.panel.innerHTML` a bit and changed it to this:

```auto
<div>
        <h2>Retractable Sofa</h2>
    <div style="margin-bottom: 20px;">
         <p>Tesla</p>
         <img src="{$require('./assets/tesla-mini.jpg'}">
     </div>
     <div style="margin-bottom: 20px;">
         <p>Tesla</p>
         <img src="{$require('./assets/tesla-mini.jpg'}">
     </div>
     <!-- More images and descriptions as needed -->
</div>

```

---

<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:** [February 27, 2024, 11:00pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/11 "2024-02-27T23:00:08Z")

</div>

You’ll need to use backticks instead of quotes, so the require statement is actually evaluated:

```auto
<img src=`${require('./assets/tesla-mini.jpg'}`>

```

> **[Template literals (Template strings) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)**
>
> Template literals are literals delimited with backtick (\`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 11:06pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/12 "2024-02-27T23:06:16Z")

</div>

did not work. An error code appeared.  
erro:  
Build failed for [0f6f93e] with errors:  
./app.js  
Module build failed (from /var/task/node\_modules/babel-loader/lib/index.js):  
SyntaxError: /tmp/src/awsolution.retratil/app.js: Unexpected token, expected “;” (89:20)

87 |

  
88 | 

Tesla

> 89 | \<img src=`${require('./assets/tesla-mini.jpg')}`\>  
> | ^  
> 90 |

  
91 | 
  
92 | 

Tesla

  
at Object.\_raise (/var/task/node\_modules/@babel/parser/lib/index.js:766:17)  
at Object.raiseWithData (/var/task/node\_modules/@babel/parser/lib/index.js:759:17)  
at Object.raise (/var/task/node\_modules/@babel/parser/lib/index.js:753:17)  
at Object.unexpected (/var/task/node\_modules/@babel/parser/lib/index.js:8966:16)  
at Object.semicolon (/var/task/node\_modules/@babel/parser/lib/index.js:8948:40)  
at Object.parseExpressionStatement (/var/task/node\_modules/@babel/parser/lib/index.js:11971:10)  
at Object.parseStatementContent (/var/task/node\_modules/@babel/parser/lib/index.js:11567:19)  
at Object.parseStatement (/var/task/node\_modules/@babel/parser/lib/index.js:11431:17)  
at Object.parseBlockOrModuleBlockBody (/var/task/node\_modules/@babel/parser/lib/index.js:12013:25)  
at Object.parseBlockBody (/var/task/node\_modules/@babel/parser/lib/index.js:11999:10)  
at Object.parseBlock (/var/task/node\_modules/@babel/parser/lib/index.js:11983:10)  
at Object.parseFunctionBody (/var/task/node\_modules/@babel/parser/lib/index.js:10963:24)  
at Object.parseFunctionBodyAndFinish (/var/task/node\_modules/@babel/parser/lib/index.js:10946:10)  
at /var/task/node\_modules/@babel/parser/lib/index.js:12153:12  
at Object.withTopicForbiddingContext (/var/task/node\_modules/@babel/parser/lib/index.js:11272:14)  
at Object.parseFunction (/var/task/node\_modules/@babel/parser/lib/index.js:12152:10)

---

<div class="post-metadata">

**Author:** ![christoph\_nia](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/christoph_nia/32/83_2.png) [@christoph\_nia](https://forum.8thwall.com/u/christoph_nia)\
**Post date:** [February 27, 2024, 11:11pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/13 "2024-02-27T23:11:25Z")

</div>

I had a missing parenthesis in my code, the full example would look more like this:

```auto
...innerHTML = `
...
<img src="${require('./assets/tesla-mini.jpg')}" ...>
...
`

```

---

<div class="post-metadata">

**Author:** ![Miguel\_Paula](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@Miguel\_Paula](https://forum.8thwall.com/u/Miguel_Paula)\
**Post date:** [February 27, 2024, 11:17pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/14 "2024-02-27T23:17:15Z")

</div>

it worked thank you very much!

---

<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:** [May 14, 2024, 10:02pm UTC](https://forum.8thwall.com/t/how-to-make-a-panel-with-images/480/15 "2024-05-14T22:02:40Z")

</div>

Closed on May 14, 2024, 10:02pm UTC

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