javascript - Import raw image data into a script with vite - Stack Overflow

admin管理员组

文章数量:1400311

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 es 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:[email protected] 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.

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 es 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:[email protected] 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.

• javascript
• png
• svelte
• vite

Share Improve this question Follow asked Sep 25, 2022 at 19:29 arckoorarckoor 33044 silver badges1313 bronze badges 1

• I've made a proposal to vite to add this. – Tristan F.-R. Commented Mar 11, 2023 at 14:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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.

It's a bit confusing how to import assets correct way but I believe using urls is the correct choice. As explained here https://vitejs.dev/guide/assets.html#importing-asset-as-url these will be either inlined as octet streams or as static assets with a changing hash in the name allowing the use of long cache expiry times.

While I also tried using hex strings as shown above, I found it doubled the size of my imported binary file. So I now use:

import binUrl from './file.bin?url'


   ...
   const bin = new Uint8Array(await (await fetch(binUrl)).arrayBuffer())
   ...

本文标签： javascriptImport raw image data into a script with viteStack Overflow