Reactjs 显示来自Mongodb（MERN）的图像

我一直在尝试使用来自mongodb的react显示图像。我用multer上传图片，工作起来很有魅力，但我的问题是，我似乎无法从数据库中输出我的图片。这是我的密码

        <div className="img-preview">
          {fields.dishImage ? (
            <img
              src={`localhost:5000/${menu.dishImage}`}
              alt={menu.dishImage}
            />
          ) : (
            <p className="image-text">
              Image Preview <br /> Suggested Size 300x300
            </p>
          )}
        </div>

---

当我从另一个选项卡打开该路径时，我看到图像正在显示。

请在url中添加

http://

比如说,

src={`http://localhost:5000/${menu.dishImage}`}

理想情况下，您应该从配置中使用

base\u url

，以便可以使用动态url。

---

另外，使用相对URL而不是静态URL实际上您可以尝试这种替代方法

PS：对于这种方法，你必须稍微修改一下你的代码

如果您使用的是大于16mb的大文件，请使用gridfs和multer，否则您可以试试这个

（将图像更改为其他格式并保存到mongoDB）

如果您的文件实际上小于16 mb，请尝试使用此转换器，将jpeg/png格式的图像更改为保存到mongodb的格式，您可以将其视为gridfs的简单替代方案

主要目标是将图像转换为另一种格式，然后将其存储在mongoDB中

我已经在github回购中发布了完整的指南，请查看它们

---

非常感谢您！完美的工作就像一个魅力！欢迎：）只是一个友好的建议。请尝试遵循代码中的最佳实践！它会帮你从这样的麻烦中解脱出来，也会帮你节省时间！

src={`http://localhost:5000/${menu.dishImage}`}