Search code examples
javascripthtmlliveserver

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 ?

Solution

  • 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"/>