显示来自 Mongodb (MERN) 的图像

Question

我一直在尝试使用 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>

menu.dishImage 包含这样的内容 uploads/2020-07-15T09-13-56.569Zcovid palette.jpg

我收到这样的错误

GET localhost:5000/uploads/2020-07-15T09-13-56.569Zcovid palette.jpg net::ERR_UNKNOWN_URL_SCHEME

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

Answer 1

请在您的 url 中添加 http://。

例如，

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

理想情况下，您应该使用配置中的 base_url 以便您可以使用动态 URLS。此外，使用相对 URL 而不是静态 URL

Answer 2

其实你可以试试这个替代方法，

PS: 你必须为这个方法稍微改变你的代码，

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

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

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

主要目的是将图像转换成另一种格式，然后将它们存储在mongoDB

我已经在这个 github 回购中提供了完整的指南，请检查它们，

please check this github repo for more details..

显示来自 Mongodb (MERN) 的图像

Display Image from Mongodb (MERN)

image

mongodb

reactjs

multer