时间戳

首页 > 解决方案 > create-react-app：我在哪里放置动态上传的图片？

image - create-react-app：我在哪里放置动态上传的图片？

问题描述

嗨，我正在使用 create-react-app，我已经设置了一个文件上传，允许将图像发送到后端并保存在本地（到项目构建目录）。我可以通过 localhost:4000/image.png 动态引用图像，这样就可以了（即：我有一个博客，可以让我上传稍后通过 blogList 访问的图像）。

但是我认为这可能不是动态上传图像的最佳位置。我已经阅读了有关 create-react-app 的文档，并且提到图像的两个位置似乎都不适用于我的用例，我觉得我肯定做错了什么，但我不确定是什么。

我指的文档：说使用“导入”但是我动态加载所以我看不出这是如何工作的？ 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-文件夹

注意：我有一个图像上传器和后端工作正常，它已经使用 /build 目录工作。我可以上传和动态引用图像。我只是在寻找做这样的事情的最佳实践。谢谢！（如果您提到“只使用 nginx”，您能否详细说明一下实现）

标签： imagereactjsexpressuploadcreate-react-app

解决方案

作为一名学习者，我曾在这个问题上苦苦挣扎，不久前曾尝试过不同的方法。对于很少使用的资产，对客户端使用 /public 可能很有用，但我有一个应用程序，客户端可以在其中上传图像并管理它们。和你一样，我不喜欢这些方法并最终采用了这种设置。

  • 在后端创建 /public 目录并将图片上传到 /public/images
  • 使用 Express 静态服务 /public 目录。
  • 使用动态路径变量（通过配置设置）作为图像路径。http://localhost:backend_port/public/images用于开发和 /public/images 用于生产。

我不知道这是最好的方法，但它对我有用。除了在设置 CRA 在每次图像上传后刷新（热重新加载）我的应用程序之前上传图像时最好的方法。

推荐阅读