Load Assets

In Nexo Maker, you can load and display images—such as icons, textures, or previews—within your front-end components using a safe and consistent method provided by the platform.

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:

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):

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

Remote Image (from a hosted URL):

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):

<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.