Script from “http://127.0.0.1:5500/assets/platform.png” was blocked because of a disallowed MIME type (“image/png”)

Question

Apologies if this is a repetitive question however I have looked all over and found no suitable solution for my particular issue. I am attempting to build a simple JavaScript game but am having issues with importing images.

For reference, here is my relevant code:

index.html

<canvas id="gameScreen" width="1420" height="965"></canvas>
<script src="src/index.js" type="module"></script>

And from my index.js file:

import platform from "../assets/platform.png";

I am receiving the following error when trying to import this image:

Script from “http://127.0.0.1:5500/assets/platform.png” was blocked because of a disallowed MIME type (“image/png”).

I have tried changing the 'type' specified in the script tag, to no avail. Also, I should note I am using the Live Server extension.

Any help is much appreciated.

Answer 1

In JavaScript, the ES6 import statement can't be used to import anything except JavaScript modules.

Tools like Webpack — which pre-process import statements to convert JS programs using ES6 modules into a format that browsers which doesn't support modules can use — can do things with non-JS resources.

They aren't executing the JavaScript, so the rules for them are different.

At the simple end of the scale, this involves copying the non-JS file to the build directory and replacing the import with a variable declaration and assigning a URL (in a string) to that variable.

Since you aren't using a bundler, you need to do that yourself.

Replace:

import platform from "../assets/platform.png";

with something like

const platform = "/path/to/platform.png";