如何配置Webpack在某个目录下显示动态上传的图片？

Question

我的应用程序是一个 JHipster 应用程序，它随 Webpack 一起提供。

我通过 java REST API 上传图片，然后将它们放在 webapp 中的一个目录中（名为 "photos/"）。
为了在 webapp 中显示它们，我在 angular/JS 脚本中发送了一个包含图像 url 的 JS 对象。
此外，我希望能够通过 URL 直接访问它们。我还想使用一个在未来的构建中不会被删除的目录。

我无法正确配置 webpack：我收到 html 404 错误（来自 webapp 内部，直接 URL ）
我现在可以获得的所有信息都涉及从 webapp 内部显示的静态图像，我不知道如何适应我的问题。

我在 webpack.common.js

中添加了这个

         {
              test: /photos\/.*\.jpg$/i,
              loader: 'file-loader',
              options: {
                name: '[name].jpg',
                outputPath: 'photos/',
                publicPath: 'photos/'
            }
          },

这是关联的 HTML 位

                <dd *ngFor="let path of observation.imagesPath" >
                    <div>
                        <a href="{{path}}">
                            <img class="t_imageGalery" src="{{path}}" />

                        </a>
                    </div>
                </dd>

抱歉，如果我遗漏了一些明显的东西，这是我第一个使用 webpack 的应用程序。

Answer 1

我自己回复，以防以后有人遇到同样的问题。看到后，我不明白这个问题与webpack无关（显然不是webserver）。

所以我只是通过在 WebConfigurer

中添加此代码位来使用 spring 启动 webMvcConfigrer

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/photos/**")
          .addResourceLocations("file:" + env.getProperty("storage.imagepath"));
     }

如何配置Webpack在某个目录下显示动态上传的图片？

How to configure Webpack to display images uploaded on-the-fly in a certain directory?

jhipster

webpack