无法访问从react前端到spring boot后端上传的映像

Question

目前我正在做一个项目，我试图上传一个图像从反应前端到Spring启动后端。我能够成功上传我的图像，并将其存储在我的“目标/类/静态/公共/资产”文件夹中。我还将路径存储在我的数据库中，即“/public/资产/image_name.jpg”。构建“. jar”文件后，当我尝试访问图像时，它会给我这个错误消息。但是我能够访问我存储在“/资源/静态/”文件夹中的那些图像。

我知道这是一个配置问题。但我不知道我做错了什么。因为ReactJS在构建“. jar”文件后可以访问那些“/资源/静态”文件夹图像。所以为什么它不能访问“/目标/静态/公共/资产”文件夹图像。

我存储图像的地方

数据库：

在“npm run build”之后，我将所有ReactJS文件放在我的“/目标/类/静态/”文件夹中

我真的需要知道如何在构建jar文件后访问和呈现我存储在文件系统中的那些静态图像

Answer 1

在花了好几个小时后，我终于解决了我的问题。我真的很理解spring boot中静态和动态资源是如何工作的。这真的很容易，但不幸的是，我从谷歌得到的大多数答案都非常令人困惑和误导。

所以这里是解决方案：

我们在应用程序中提供两种类型的静态内容：

第一：应用程序在Web服务器上运行时我们不会更新的内容，例如：|. css|. js|. html|文件，以及

第二：图像，如124。jpg |。png |。jpeg |。svg |我们主要是要更新它或需要动态行为。例如：上传个人资料图片或更改封面图片或英雄图片、博客帖子图片。

所以在Spring-Boot应用程序中。对于第一部分：我们将把我们的|. css|. js|. html|文件放在 /src/main/resources/static/文件夹中。所以当我们将项目构建到jar文件中时，它会自动复制这些文件并将它们放入“/目标/类/静态/”文件夹中。当您运行服务器时，您将能够在字体端应用程序（ReactJS）中看到这些静态内容。

现在，对于第二部分，您需要少量的配置。您需要创建一个类来实现称为WebMVCConfiguer的接口。

@Configuration
public class StaticConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:" + System.getProperty("user.dir") + "/uploads/");
    }
}

在此，我将图像保存在：

"/用户/{your_computer_name}/{proj_name}/上传/"文件夹

这就是为什么我把它放在addResourceLocations中。我使用了绝对路径。但您也可以使用这样的相对路径：

registry.addResourceHandler("/uploads/**").addResourceLocations("file:uploads/");

它将搜索相对于“.jar”文件位置上传的图像。

之后，如果您构建jar文件并使用终端或任何IDE运行它，您将能够直接从http://localhost:8080/uploads访问上传的图像，并在前端应用程序中显示它，而无需刷新网页或重新启动服务器。

注意：如果您在addResourceLocations中使用相对路径，请确保您上传的图像文件夹相对于您的jar文件，否则它将在您的浏览器控制台中显示404 Not Find。

假设您的jar文件位于“目录”文件夹中，那么您上载的图像文件夹应该位于该“目录”文件夹中

/Directoryspring_boot_app.jar上传avatar.jpg