0
274
VistasError al cargar el script del módulo al importar un archivo .jpg en un archivo javascript
Solo intento importar una imagen en un archivo javascript para probar los activos del paquete web. Cuando inicio la extensión Live Server en VS-Code, debería ver la imagen pero recibo el siguiente error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello world!</title> </head> <body> <script type="module" src="./src/index.js"></script> </body> </html>índice.js
import tech2 from "./tech2.jpg"; function addImage() { const img = document.createElement("img"); img.alt = "Tech."; img.width = 300; img.src = tech2; const body = document.querySelector("body"); body.appendChild(img); } addImage();webpack.config.js:
module.exports = { entry: "./src/index.js", output: { path: __dirname + "/dist", filename: "bundle.js", }, mode: "none", module: { rules: [ { test: /\.(jpg|png)$/, type: "asset/resource", }, ], }, };¡No hay nada en el cuerpo!:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Webpack tiene funciones que pueden tomar una import que apunte a un archivo de imagen y convertirlo en una URL. Los navegadores no pueden hacer eso, lo único que puede usar import para cargar en un navegador es un módulo de JavaScript.
Tiene una configuración de Webpack, pero no la está usando.
- Dijiste que estabas usando VS Code Live Server
- La URL en el navegador apunta a
srcnotdist(por lo que no está ejecutando la canalización de compilación del paquete web manualmente y usando los resultados).
Si desea usar Webpack mientras desarrolla, use el servidor de desarrollo de Webpack en lugar de la extensión VS Code Live Server.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta