# Load Asset

However, since **Expansions are loaded from outside the core source code** (e.g. from the `Documents > NexoMaker > Expansions` folder), assets like images **cannot be directly imported** or passed as file paths to frontend components.

To solve this, we use **Base64 encoding**.

***

#### 🔎 What is Base64?

**Base64** is a method for encoding binary data (like images) into a text format that can be safely embedded into JavaScript, HTML, or JSON. It allows you to include an image as a string, which can then be displayed without needing a separate file path.

***

## ✅ Loading Images with loadAsset()

Nexo Maker provides a helper function to generate Base64 strings from **local files** or **URLs**:

```js
api.nexomaker.loadAsset(pathOrUrl)
```

This function reads the image, encodes it in Base64, and returns the result as a string you can use anywhere in your Expansion.

***

#### 💡 Example Usage

**Local Image (within your Expansion folder):**

```js
const myImage = await api.nexomaker.loadAsset(__dirname + "/assets/myImage.png");
```

**Remote Image (from a hosted URL):**

```js
const myImage = await api.nexomaker.loadAsset("https://example.com/images/logo.png");
```

You can now use the `myImage` variable wherever you need to display the image (e.g., in a React component or HTML element):

```jsx
<img src={myImage} alt="Custom Icon" />
```

***

#### ⚠️ Notes

* `loadAsset()` supports PNG, JPG, GIF, and most common image formats.
* Ensure the image path is correct when using `__dirname`.
* For performance, avoid converting large images unnecessarily or on every render—cache the result when possible.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nexo-maker.gitbook.io/nexo-maker-docs/main.js/api/loaders/load-asset.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.