如何在Node.js服务器的反应中显示图像

Question

I have a record in mongodb which holds the file name of an image I want to show on the frontend ie: react. The image name is portraits.jpg in mongodb.

Firstly, should I be saving the path name as well into mongo or just the image name ie: /img/portraits.jpg vs portraits.jpg

Secondly, how can I show the image in React?

I am getting the data from the database using axios and then sending the data to another component:

const { categories } = this.props;

{categories.map(category => (
  <Col md={6} className="mb-3" key={category._id}>
    <Figure className="cat-photo">
      <h1>{category.name}</h1>
      <img src={category.catimg} className="img-fluid" />
    </Figure>
  </Col>
))}

When I view the source code in browser, it is looking at http://localhost:3000/img/portraits.jpg but the node.js server is running on port 8000. So, I am guessing that is why there is no image showing up because the image is on the server and nowhere to be found in React file structure.

Answer 1

In the first place, make sure your image is actually accessible on the node server (eg visit http://localhost:8000/img/portraits.jpg ).

If it is, you just need to add the hostname to the URL. You can do it old school like src={"http://localhost:8000" + category.catimg} or with new in string replacement as follows:

const { categories } = this.props;

{categories.map(category => (
  <Col md={6} className="mb-3" key={category._id}>
    <Figure className="cat-photo">
      <h1>{category.name}</h1>
      <img src={`http://localhost:8000${category.catimg}`} className="img-fluid" />
    </Figure>
  </Col>
))}

Regarding your question, if you should store the whole path into your database or not, that is something left to decide to you. It's not about what is better but what suits your architecture and use case better. However, IMHO this is a very minor and irrelevant question and should be revertable at any point anyway.

Answer 2

To answer your first question, should you store the path in MongoDB, that depends. If all the images live in a flat namespace (ie, in a single directory), then there's no need to store the path in the database, since all the images will have the same path. But if the paths may vary, then you at least need to store some part of the path.

On to your next question. You have two servers:

• (Probably) Webpack, which is running on port 3000 and serving your React assets
• Your Node server on port 8000

Your UI is trying to load the image from Webpack because that's where the page came from. You need to configure Webpack to proxy service calls and other requests for dynamic assets to your Node server.

A simple configuration:

devServer: {
  ...
  proxy: {
    '/img': {
      target: 'http://localhost:3000',
      secure: false
    }
  }
}

There's a Medium article that goes into greater detail.

If you're using create-react-app and it is managing your Webpack configuration, you can put the proxy information in package.json . See the documentation for more information.