由于 MIME 类型错误，无法在 HTML 中导入 JavaScript

Question

当我尝试导入我的 JavaScript 文件时出现此错误：

error

不确定此链接是否有效，但我已尝试链接到 Replit： https://replit.com/@Freyseee/PostNord-simulator?s=app#app.js

相关文件位置：

simple.js
public/html/videofeed.html
公共/js/stream.js

files files

videofeed.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="../css/style.css">

  <!-- javascript -->
  <script src='../libraries/tracking.js'></script>
  <script src=".../simple.js" defer></script>
  <script src="../js/websocket.js" defer></script>
  <script src="../js/stream.js" defer></script>
  <title>Simple websocket</title>
</head>

<body>
  <h1> Stream</h1>

  <img id="stream"
    src="https://www.shutterstock.com/image-illustration/plain-cyan-solid-color-background-260nw-1922086277.jpg">
  <canvas id="canvas">

  </canvas>
</body>

</html>

simple.js

let count = 0;
let mc = [];
let homepage = [];


function websocket(wss) {
  wss.on("connection", (ws) => {
    console.log("Client connected");

    ws.on("message", function(message, isBinary) {
      message = isBinary ? message : message.toString();
      console.log(message);
      if (message == "mc") {
        mc.push(ws);
      }
      if (message == "hp") {
        homepage.push(ws);
      }
      mc.forEach(async (client) => {
        await client.send("m");
      }),
        homepage.forEach(async (client) => {
          await client.send(message);
        }
        );
    })

    ws.on("close", () => console.log("Client disconnected"));
  });

  setInterval(() => {
  }, 1000);
}

//Inform clients (called in stream.js)
function itsYellow() {
  mc.forEach(async (client) => {
    await client.send("gul");
  })
}
function itsCyan() {
  mc.forEach(async (client) => {
    await client.send("blaa");
  })
}
function itsMagenta() {
  mc.forEach(async (client) => {
    await client.send("lilla");
  })
}

module.exports = websocket;

stream.js

// source: https://bensonruan.com/color-tracking-with-tracking-js/

var image = document.getElementById("stream");
const ctx = document.getElementById("canvas").getContext("2d");

setTimeout(() => {
  ctx.canvas.width = image.width;
  ctx.canvas.height = image.height;
  ctx.drawImage(img, 0, 0);
}, 1000);

//source: https://tangiblejs.com/posts/tracking-color-blobs-in-webcam-feed-using-tracking-js
var img = document.getElementById('stream');
var canvas = document.getElementById('canvas');
var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

tracker.on('track', function(e) {

  //Find colour
  if (e.data.length !== 0) {
    e.data.forEach(function(rect) {
      console.log(rect);

      //Inform clients
      if (rect.color === "yellow") {
        itsYellow();
      }
      else if (rect.color === "magenta") {
        itsMagenta();
      }
      else if (rect.color === "cyan") {
        itsCyan();
      }
    });

  }

});

tracking.track(img, tracker, { camera: true });

我试过改变我引用脚本的方式，但我似乎无法让它工作。我已经包含了文件以备不时之需，并描述了我的文件是如何“排列”的。我需要使用 Simple.js，因为我需要向客户端发送消息。

Answer 1

你用的是三个点

<script src=".../simple.js" defer></script>

我觉得应该是：

<script src="../simple.js" defer></script>

---编辑---

simple.js

在公众之外吗？

<script src="../../simple.js" defer></script>

由于 MIME 类型错误，无法在 HTML 中导入 JavaScript

问题描述投票：0回答：1

1个回答

最新问题

由于 MIME 类型错误，无法在 HTML 中导入 JavaScript

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1