在 asp.net 上加载 ReactJS 视图问题与图像路径

Question

我正在尝试将 React 应用程序加载到 asp.net 视图中（项目最初是用 asp.Net 编写的，我正在使用 React 创建新页面以供学习和娱乐）。

当 React 应用程序在 dev move 中运行时，所有图像都会加载，所有路径工作都没有任何问题。

使用 npm run build 构建应用程序后，会生成 js 文件和相应的图像文件，并将它们放在我的 asp.net 应用程序的文件夹中（例如 Scripts 文件夹）。

当我尝试查看页面时，React 应用程序会加载并呈现屏幕，但由于网站无法找到图像，因此图像全部损坏。

查看图片未加载的原因后，由于尝试从当前 URL 加载图片，而不是 js 文件和图片的存储位置，他们收到 404 not found 错误。

例如，加载 React 应用的视图位于 https://localhost/Home/ReactPage

而且 ReactPage.cshtml 里面有以下内容：

<div id="thisIsTheReactDiv"></div>

<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>

React app js 位于项目的 Script 文件夹中，所以要访问它，src 已如上图所示。要访问图像，您必须执行 https://localhost/Scripts/ThisFolder/image.png

之类的操作

在这个阶段，它正在做的是将图像链接到https://localhost/Home/ReactPage/image.png，这会导致 404 错误。

是否有任何 webpack 配置可以使其在构建之前指向特定路径？

有没有办法让 React 应用程序在为 PROD 构建时更新图像相对路径，以便它查看特定文件夹而不是尝试从当前路径获取它？

Answer 1

好的，经过几个小时的搜索（这导致我发布了这个问题），我现在已经弄清楚了 Webpack 如何与相对路径一起工作。

看起来在输出设置中有一个名为“publicPath”的部分，您可以在其中输入以获取相对于您的 React JS 文件部署位置的路径。

所以看起来像在输入

 publicPath: "/Scripts/ThisFolder/",

将使相对路径从那里开始，因此所有图像都将从该 URL 加载。

从这个 Stack Overflow 链接可以看出：What does "publicPath" in Webpack do?