Ошибка пути к изображению Javascript в веб-пакете

Question

Я настраиваю конфигурацию веб-пакета в качестве отправной точки для своих будущих проектов, и мне нужна помощь.

Прежде чем объяснить мою проблему, я подготовил репозиторий git.

git clone https://github.com/e3i6/webpackBasic.git
npm install

Затем, просто npm start и npm run build , вы увидите то, что я вижу: все конфигурационные файлы есть.

В настоящее время моя проблема с изображениемпуть имеет два следствия:

1. С . / src / index.js : для ссылки "test.png" мне нужно написать img.src = "./src / assets / test.png "(строка 9) вместо img.src =" ./assets/test.png" (который является относительным путем).
2. При сборке приложения (npm run build) javascript не меняет путь и имя, которое является ошибкой: моя конфигурация webpack переименовывает каждый файл, чтобы избежать проблемы с кэшированием. Фактически, упомянутый URL остается неизменным, и даже путь неверен.

В репозитории git вы легко можете увидеть мой конфиг. Я подумал, что это лучший способ понять проблему и помочь мне решить эту проблему.

Спасибо за любую помощь, которую вы можете мне дать!

Answer 1

Я решил свою проблему с путями к изображениям в веб-пакете.

Проблема заключалась в том, что веб-пакет не мог решить эту проблему:

cubeMat.diffuseTexture = new Texture("./assets/background.png", scene);

Очевидно, что с веб-пакетом необходимо импортировать изображения, прежде чем использовать их в противном случае. он не скомпилируется правильно.

import img2 from “./assets/background.png”;

…

cubeMat.diffuseTexture = new Texture(img2, scene);

Я новичок в веб-пакете, так что это не было для меня очевидным.

Хорошего дня!