服务器以“图像/png”的MIME类型响应。 -html / javaScript

发布于 2025-01-28 11:33:05 字数 421 浏览 2 评论 0原文

我正在使用HTML和JavaScript构建类似Mario的游戏，现在几乎完成了，我想通过图像更改矩形（平台）。

这是我的结构：

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

在我的index.js中导入我的图像： 从'./assets/platform.png'

浏览器返回此错误：

无法加载模块脚本：预期一个JavaScript模块脚本，但服务器以“ Image/png”的MIME类型响应。严格的MIME类型检查是针对每个HTML规格的模块脚本执行的。

我正在使用VSCODE的实时服务器。

有什么帮助吗？

原文

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 ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨的味道风的声音 2025-02-04 11:33:05

您可以使用添加img src用JS动态属性：

document.querySelector('.myImg').src = 'https://placekitten.com/500/500' // or ./assets/platform.png

<img class="myImg"/>

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

回复收藏 0 原文

眼中杀气 2025-02-04 11:33:05

导入用于导入脚本。您导入图像。

回复收藏 0 原文

桃扇骨 2025-02-04 11:33:05

伙计，这并不容易解决，但是我认为您正在尝试用“导入图像”来引用图像，

而不是这样，您将图像引用在const。中，并且图像源必须是URL从您在github上的存储库。

const image =新图像（）
image.src ='http://127.0.0.1:5500/src/imagens/platform_c.png'

回复收藏 0 原文

淡写薰衣草的香 2025-02-04 11:33:05

const image = new Image();
image.src = './assests/platform.png'

const image = new Image();
image.src = './assests/platform.png'

回复收藏 0 原文

幸福％小乖 2025-02-04 11:33:05

// Instead of importing the image directly, load it dynamically
const platformImage = new Image();
platformImage.src = './imgs/platform.png';  // Path to the image

// Log the image object to see it in the console
console.log(platformImage);

这将肯定可行100000％。只需在JS文件的顶部添加此代码行

// Instead of importing the image directly, load it dynamically
const platformImage = new Image();
platformImage.src = './imgs/platform.png';  // Path to the image

// Log the image object to see it in the console
console.log(platformImage);

this will work im 100000% sure. Just add this line of code on top of your JS file

回复收藏 0 原文

~没有更多了~