Import raw image data into a script with vite

Question

According to the Vite Docs, one can import a file as a raw data string.

In a svelte project I need to use not just the URL, but the whole image data. As such, I tried to import image from "@/assets/image.png?raw". However, whatever I try I cannot convert this to a Uint8Array. I have tried using string.charCodeAt(0), string.codePointAt(0) and all kinds of other stuff. I expect the first bytes to be 137, 80, 78, 71, 13, 10, 26, 10 as that is the PNG header, but it always comes back as 253, 80, 78, 71, 13, 10, 26, 10. These discrepancies continue through the whole string.

I have no idea what encoding this is in and as such don't know how to decode it into image data again. I previously tried using fetch(), but since my origin uses Basic-Auth that also didn't work (The credentials change from user to user, and I want to avoid having them to type it in again somewhere else - I use https://user:password@example.com as URL notation).

import image from "@/assets/image.png?raw";

let data = Uint8Array.from([..image].map(x => x.codePointAt(0)));
console.log(data);
// [253, 80, 78, 71, 13, 10, 26, 10, ...]

How can I get the actual image data into my script, without using something like fetch? The format can be pretty much anything, I use it both as a Uint8Array and a base64 string, and I can convert between the two. I can also convert from a Blob / File.

I've made a [proposal to vite](https://github.com/vitejs/vite/issues/12366) to add this. — LeoDog896, Mar 11 '23 at 14:54

score 4 · Accepted Answer · answered Sep 26 '22 at 04:50

The raw loader does not appear to be suitable for binary data. When I tried it, I ended up with replacement characters (�) in the data.

You can easily write your own plugin that encodes the image however you want, e.g. as a hex string:

/** @type {import('vite').Plugin} */
const hexLoader = {
    name: 'hex-loader',
    transform(code, id) {
        const [path, query] = id.split('?');
        if (query != 'raw-hex')
            return null;

        const data = fs.readFileSync(path);
        const hex = data.toString('hex');

        return `export default '${hex}';`;
    }
};

Which can be added in the vite config, e.g.

const config = {
    plugins: [hexLoader, sveltekit()],
    // ...
}

Then you can import using a path/file.png?raw-hex and convert the data.

Import raw image data into a script with vite

1 Answers1

Linked