How to Convert Image to Base64 in Wix Velo

Base64 encoding is a powerful technique that allows you to convert images into a text-based format. This is especially useful when you need to embed images directly into HTML, store them in a database, or send them over APIs without relying on external URLs.

In Wix (or any Node.js/JavaScript environment), you can easily convert an image to Base64 using the image-to-base64 package.

Wix Velo Code to Convert Image to Base64 in Wix Velo

Here’s a simple, ready-to-use function to help you achieve this:

import imageToBase64 from 'image-to-base64';

export async function convertImageToBase64(url) {
    
try {
        const base64 = await imageToBase64(url);
        return base64;
    } catch (err) {
        console.error("Conversion failed:", err);
        throw new Error("Image conversion failed");
    }
}

How it works:

✅ The function accepts an image URL (can be an HTTP URL or a local file path).

✅ It uses the image-to-base64 library to fetch the image and convert it to a Base64-encoded string.

✅ If the conversion fails, the function logs an error and throws an exception to help with debugging.

Example usage:

const url = "https://static.wixstatic.com/media/abcd1234~mv2.jpg";

convertImageToBase64(url)
    .then(base64 => {
        console.log("Base64 string:", base64);
    })
    .catch(err => {
        console.error(err);
    });

Why Base64?

• Embed images directly in HTML or CSS (no separate file hosting required)

• Simplify data transfers over APIs

• Store images in JSON payloads or databases

  
  

This function gives you a flexible, clean way to handle image-to-base64 conversions in your Wix Velo or other JavaScript projects.

Need help with more advanced Wix or JavaScript integrations? Wix Crafters is here to support your projects with expert Velo development and automation solutions.