Я просто пытаюсь импортировать изображение в файл javascript для проверки ресурсов веб-пакета. Когда я запускаю расширение Live Server в VS-Code, я должен увидеть изображение, но получаю следующую ошибку:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.
индекс.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Hello world!</title>
</head>
<body>
<script type = "module" src = "./src/index.js"></script>
</body>
</html>
index.js
import tech2 from "./tech2.jpg";
function addImage() {
const img = document.createElement("img");
img.alt = "Tech.";
img.width = 300;
img.src = tech2;
const body = document.querySelector("body");
body.appendChild(img);
}
addImage();
веб-пакет.config.js:
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
},
mode: "none",
module: {
rules: [
{
test: /\.(jpg|png)$/,
type: "asset/resource",
},
],
},
};
В теле ничего нет!:
В Webpack есть функции, которые могут принимать знак import
, указывающий на файл изображения, и преобразовывать его в URL-адрес. Браузеры не могут этого сделать, единственное, что вы можете использовать import
для загрузки в браузере, — это модуль JavaScript.
У вас есть конфигурация Webpack, но вы ее не используете.
src
, а не на dist
(поэтому вы не запускаете конвейер сборки webpack вручную и не используете результаты).Если вы хотите использовать Webpack во время разработки, используйте сервер разработки Webpack вместо расширения VS Code Live Server.
Если у вас есть проблемы с использованием сервера разработки webpack, то это проблема другой, поэтому вам следует задать новый вопрос, указать минимальный воспроизводимый пример и процитировать полное сообщение об ошибке, если оно связано с этим подходом.
Спасибо. Я сделаю это. Но мой недавний вопрос: не должен ли браузер отображать мой пустой HTML с одним файлом javascript, который использует метод импорта для добавления файла jpg? Требуется ли загрузчик или браузер должен иметь возможность импортировать файл jpg с помощью javascript и добавлять его в тело файла HTML?
@Codie - я отсылаю вас ко второму предложению этого ответа.
Я прочитал это. Но я следую курсу, по которому инструктор просто скопировал путь к файлу index.html и вставил его в браузер. И он отобразил изображение без каких-либо ошибок. из-за этого я искал документы. Однако я задам еще один вопрос о веб-пакете и поделюсь там своим кодом и конфигурацией. Спасибо. С наилучшими пожеланиями.
Вы, должно быть, пропустили что-то, что сделал инструктор. Браузеры не могут импортировать ничего, что не является модулем JS.
Спасибо за ваш ответ. Я импортировал свой файл jpg в файл javascript, и тип файла определяется как модуль. Однако есть ошибка. Я также попробовал сервер разработки веб-пакетов и все еще не могу отобразить свой HTML-файл. Должен ли я также добавить свою конфигурацию для сервера разработки webpack?