De acuerdo con Vite Docs , uno puede importar un archivo como una cadena de datos sin procesar.
En un proyecto esbelto, necesito usar no solo la URL, sino todos los datos de la imagen.
Como tal, intenté import image from "@/assets/image.png?raw" .
Sin embargo, intente lo que intente, no puedo convertir esto en Uint8Array . Intenté usar string.charCodeAt(0) , string.codePointAt(0) y todo tipo de otras cosas.
Espero que los primeros bytes sean 137, 80, 78, 71, 13, 10, 26, 10 ya que ese es el encabezado PNG , pero siempre regresa como 253, 80, 78, 71, 13, 10, 26, 10 . Estas discrepancias continúan a lo largo de toda la cadena.
No tengo idea de en qué codificación está esto y, como tal, no sé cómo decodificarlo en datos de imagen nuevamente. Anteriormente intenté usar fetch() , pero dado que mi origen usa Basic-Auth que tampoco funcionó (las credenciales cambian de un usuario a otro, y quiero evitar que lo escriban nuevamente en otro lugar; uso https://user:password@example.com como notación de URL).
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, ...]
¿Cómo puedo obtener los datos de la imagen real en mi secuencia de comandos, sin usar algo como fetch?
El formato puede ser casi cualquier cosa, lo uso como Uint8Array y como cadena base64 , y puedo convertir entre los dos . También puedo convertir desde un Blob / File .
El cargador sin procesar no parece ser adecuado para datos binarios. Cuando lo probé, terminé con caracteres de reemplazo ( � ) en los datos.
Puede escribir fácilmente su propio complemento que codifica la imagen como desee, por ejemplo, como una cadena hexadecimal:
/** @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}';`;
}
};
Que se puede agregar en la configuración de vite, por ejemplo
const config = {
plugins: [hexLoader, sveltekit()],
// ...
}
Luego puede importar usando una path/file.png?raw-hex y convertir los datos .