Disculpas si esta es una pregunta repetitiva, sin embargo, he buscado por todas partes y no encontré una solución adecuada para mi problema en particular. Estoy intentando crear un juego de JavaScript simple, pero tengo problemas con la importación de imágenes.
Como referencia, aquí está mi código relevante:
índice.html
<canvas id="gameScreen" width="1420" height="965"></canvas> <script src="src/index.js" type="module"></script>Y de mi archivo index.js:
import platform from "../assets/platform.png";
Recibo el siguiente error al intentar importar esta imagen:
Script from “http://127.0.0.1:5500/assets/platform.png” was blocked because of a disallowed MIME type (“image/png”).
He intentado cambiar el 'tipo' especificado en la etiqueta del script, pero fue en vano. Además, debo señalar que estoy usando la extensión Live Server.
Cualquier ayuda es muy apreciada.
En JavaScript, la declaración de import de ES6 no se puede usar para importar nada excepto módulos de JavaScript.
Herramientas como Webpack, que preprocesan declaraciones de import para convertir programas JS que usan módulos ES6 en un formato que pueden usar los navegadores que no admiten módulos, pueden hacer cosas con recursos que no son JS.
No están ejecutando JavaScript, por lo que las reglas para ellos son diferentes.
En el extremo simple de la escala, esto implica copiar el archivo que no es JS en el directorio de compilación y reemplazar la import con una declaración de variable y asignar una URL (en una cadena) a esa variable.
Como no está utilizando un paquete, debe hacerlo usted mismo.
Reemplazar:
import platform from "../assets/platform.png";
con algo como
const platform = "/path/to/platform.png";