Search code examples
reactjsmongodbimagemulter

Display Image from Mongodb (MERN)

I've been trying to display an image using react from mongodb. I used multer to upload images and worked like a charm but my problem is, it seems that I cant output my image from the database. Heres my code.

        <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>

The menu.dishImage contains something like this uploads/2020-07-15T09-13-56.569Zcovid palette.jpg

And I am getting an Error like this

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

When I am opening that path from another tab I am seeing that the image is being shown.

Solution

  • Please add http:// in your url.

    For example,

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

    Ideally, You should use base_url from config so that you can use dynamic URLS. Also, Use relative URLs instead of Static URLs