'the server responded with a MIME type of "image/png" - HTML / JavaScript

I'm building a mario-like game with HTML and JavaScript, and now that it is almost done, i'd like to change my rectangles (the platforms) by images.

Here is my structure :

- index.html
- index.js
- index.css
- /assets/platform.png

To import my image, in my index.js I did : import platform from './assets/platform.png'

Browser return this error :

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/png". Strict MIME type checking is enforced for module scripts per HTML spec.

I am using Live Server from VSCode.

Any help on this ?

javascripthtmlliveserver


Solution 1:[1]

You can use add img src attribute dynamically with js:

document.querySelector('.myImg').src = 'https://placekitten.com/500/500' // or ./assets/platform.png
<img class="myImg"/>

Solution 2:[2]

Import is for importing scripts. You import image.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 honza

Related Questions