Я пытаюсь загрузить приложение React в представление asp.net (проект изначально был написан на asp.Net, я создаю новые страницы с использованием React для целей обучения и для развлечения).
КогдаПриложение React работает в dev move, все изображения загружаются без проблем, все пути работают.
После сборки приложения с использованием npm run build генерируется файл js и соответствующие файлы изображений, и я помещаю их в папкув моем приложении asp.net (например, в папке «Сценарии»).
Когда я пытаюсь просмотреть страницу, приложение React загружается и отображается экран, но все изображения повреждены, поскольку веб-сайт не может их найти.
Посмотрев, почему изображения не загружаются, они получают ошибку 404 not found из-за того, что изображения пытаются загрузить с текущего URL, а не из-за того, что файл js и изображениясохранено.
Например, представление, загружающее приложение React, имеет значение https://localhost/Home/ReactPage
, а в ReactPage.cshtml содержится следующее:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The ReactПриложение js находится в папке Script в проекте, поэтому для доступа к нему src был установлен, как показано выше. Чтобы получить доступ к изображению, вам нужно сделать что-то вроде https://localhost/Scripts/ThisFolder/image.png
. На этом этапе выполняется привязка к изображению https://localhost/Home/ReactPage/image.png, что вызывает ошибку 404.
Существуют ли какие-либо конфигурации веб-пакетов, которые можно сделать, чтобы он указывал на конкретный путь перед его сборкой?
Есть ли способ заставить приложение React при сборке для PROD обновлять относительные пути изображения, чтобы оносмотрит на конкретную папку, а не пытается получить ее по текущему пути?