代码之家  ›  专栏  ›  技术社区  ›  Matt Pengelly

创建React应用程序:我应该把动态上传的图像放在哪里?

  •  1
  • Matt Pengelly  · 技术社区  · 6 年前

    嗨,我正在使用Create React应用程序,我已经设置了一个文件上传,允许将图像发送到后端并本地保存(到项目构建目录)。我可以通过localhost:4000/image.png动态引用图片,这样就可以了(例如,我有一个博客,允许我上传稍后通过bloglist访问的图片)。

    不过,我觉得这可能不是动态上传图片的最佳场所。我已经阅读过Create React应用程序上的文档,这两个提到图片的位置似乎对我的用例不起作用,我觉得我确实做了一些错误的事情,但我不确定是什么。

    我指的文件: 说使用“导入”,但我动态加载,所以我看不到这将如何工作? https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files

    说“使用公共资源”,但不需要重建吗?因为我是动态加载的,这是不可能的: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder

    注意:我有一个映像上载程序和后端工作正常,它已经在使用/build目录。我可以上传和动态参考图像。我只是在寻找这样做的最佳实践。谢谢! (如果您提到“只是使用nginx”,可以详细介绍一下实现方法吗)

    1 回复  |  直到 6 年前
        1
  •  1
  •   devserkan    6 年前

    作为一个学习者,我曾经在这个问题上挣扎过,尝试过不同的方法。对于很少使用的资产,使用/public for client可能很有用,但我有一个应用程序,客户可以在其中上载图像并对其进行管理。像你一样,我不喜欢这些方法,最终得到了这个设置。

    • 在后端创建/public目录并将图像上载到/public/images
    • 以静态方式为/public directory服务。
    • 对图像路径使用动态路径变量(通过配置设置)。 http://localhost:backend_port/public/images 用于开发和/公开/制作图像。

    我不知道这是最好的方法,但它对我有用。除了在安装之前上传图片的最佳方法之外,CRA还在每次上传图片后刷新(热重新加载)我的应用程序。