# How to add 2D button image?

**URL:** <https://forum.8thwall.com/t/how-to-add-2d-button-image/4659>\
**Category:** Technical Support\
**Created:** [January 31, 2025, 2:06am UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659 "2025-01-31T02:06:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [January 31, 2025, 2:06am UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/1 "2025-01-31T02:06:41Z")

</div>

Hi,

I am trying to add 2d button. It works to set background color, but not set background image.

The reason seems that it can not locate the image under the assets folder.

```auto
const button = document.createElement(name);

button.style.position = 'absolute';
button.style.zIndex = zIndex;

button.style.top = top;
button.style.left = left;
button.style.width = width;
button.style.height = height;

button.style.backgroundImage = 'url(./assets/add-emoji.png)'
button.style.backgroundSize = 'cover'

```

---

<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 11, 2025, 9:27pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/2 "2025-02-11T21:27:50Z")

</div>

You can 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'}" ...\>

However, the best practice here would be make the background image a schema value of your component and set the image from the component configuration in the properties panel.

> **[Custom Components | 8th Wall](https://www.8thwall.com/docs/studio/guides/custom-components/#asset-references)**
>
> Custom Components might define visual appearance, physical properties, input handling, or custom game logic.

---

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [February 12, 2025, 1:39am UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/3 "2025-02-12T01:39:31Z")

</div>

Thank you!

The following attempts both failed.

```auto
const button = document.createElement('btn')
button.style.backgroundImage = '{$require("./assets/add-emoji.jpg"}'
button.style.backgroundImage = '{$require(\'./assets/add-emoji.jpg\'}'

```

---

<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 12, 2025, 6:23pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/4 "2025-02-12T18:23:27Z")

</div>

This would be the correct syntax:

```auto
button.style.backgroundImage = `url(${require('./assets/add-emoji.jpg')})`

```

Also, I think you’ll need to create a `<button>` instead of a `<btn>`:

```auto
const button = document.createElement('button')

```

Although, I would highly encourage you to use our built-in UI system to build out 2D UI instead of dynamically creating/injecting HTML.

---

<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 12, 2025, 6:25pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/5 "2025-02-12T18:25:30Z")

</div>

Using relative paths in ts/js files can be tricky due to the syntax; [assets.load](https://www.8thwall.com/docs/studio/api/ecs/assets/#load) is another way to get the URL of an asset. The [video surface sample project](https://www.8thwall.com/8thwall/video-surface/code/video-surface.ts) has an example of this.

---

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [February 12, 2025, 7:27pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/6 "2025-02-12T19:27:43Z")

</div>

Thank you, Evan!

Here is the updated code I used.

```auto
const imageUrl = require(`./${image}`)
button.style.backgroundImage = `url(${imageUrl})`
// Ensure the background image scales correctly
button.style.backgroundSize = 'cover'
button.style.backgroundPosition = 'center'
button.style.backgroundRepeat = 'no-repeat'

```

---

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [February 12, 2025, 7:29pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/7 "2025-02-12T19:29:55Z")

</div>

@Evan Btw, could you have a look at this post? [how-to-play-mp4-gif-in-studio](https://forum.8thwall.com/t/how-to-play-mp4-gif-in-studio/4639/9)

It can not play the video using Chrome on iPhone.

---

<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:** [February 16, 2025, 7:30pm UTC](https://forum.8thwall.com/t/how-to-add-2d-button-image/4659/8 "2025-02-16T19:30:39Z")

</div>

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