时间戳

首页 > 解决方案 > 如何在 node.js 服务器的反应中显示图像

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

问题描述

我在 mongodb 中有一条记录，其中包含我想在前端显示的图像的文件名，即：react. 图片名称是mongodb中的portraits.jpg。

首先，我应该将路径名也保存到 mongo 中还是只保存图像名，即：/img/portraits.jpg vs portraits.jpg

其次，如何在 React 中显示图像？

我正在使用 axios 从数据库中获取数据，然后将数据发送到另一个组件：

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

当我在浏览器中查看源代码时，它正在查看，http://localhost:3000/img/portraits.jpg但 node.js 服务器正在端口 8000 上运行。所以，我猜这就是为什么没有显示图像的原因，因为图像在服务器上并且无处可去在 React 文件结构中找到。

标签： node.jsreactjs

解决方案

首先，确保您的图像在节点服务器上实际上是可访问的（例如，访问http://localhost:8000/img/portraits.jpg）。

如果是，您只需将主机名添加到 URL。你可以像老派一样src={"http://localhost:8000" + category.catimg}或用新的字符串替换来做，如下所示：

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

关于您的问题，是否应将整个路径存储到数据库中，这由您决定。这不是关于什么更好，而是什么更适合您的架构和用例。但是，恕我直言，这是一个非常次要且无关紧要的问题，无论如何都应该可以恢复。

推荐阅读