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.
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";