如何在 ExpressJs 上加载静态图像答案

【问题标题】：How to load static images on ExpressJs如何在 ExpressJs 上加载静态图像
【发布时间】：2018-11-04 12:18:31
【问题描述】：

所以我有这个服务于 MySQL 数据库的 node/express api，有这样的 json 输出：

[
 {
  id: 1,
  name: "Laptop Lenovo",
  serial: "123-456",
  tag: "IT-CL-22052018-001",
  image: "/public/images/lenovo.jpg"
 },
 {
  id: 2,
  name: "Desktop Dell",
  serial: "456-123",
  tag: "IT.CD.19052018-002",
  image: "public/images/dell.jpg"
 },
 {
  id: 3,
  name: "Laptop Dell",
  serial: "909090",
  tag: "IT.CL.01052018.002",
  image: "http://localhost:8000/images/ldell.jpg"
 }
]

我尝试了它的每一个表达功能：

app.use(express.static('public'))

app.use('/static', express.static('public'))

var dir = path.join(__dirname, 'public');
app.use(express.static(dir));

我的 React 应用程序可以显示图像的唯一方法是使用数据库上的完整 url，例如 #3。

如何在不使用完整 url 的情况下显示图像？

编辑：添加渲染功能

render() {
    return this.state.inventory.map(itemList => {
      let item = itemList;
      return (
        // <div className="tile">
        <div className="card margin-all">
          <div className="card-content">
            <div className="media">
              <div>
                <figure className="image is-96x96">
                  <img src={item.image} />
                </figure>
              </div>
            </div>
            <div>
              <h4>Nama:  {item.name} </h4>
              <h4>Nomor Seri:  {item.serial} </h4>
              <h4>ID Tag:  {item.tag} </h4>
            </div>
          </div>
        </div>
        // </div>
      );
    })
  }
}

Pict

【问题讨论】：

显示渲染函数
添加问题
从哪里提供 react（前端）？来自expressjs？如果您正在运行 express 并作为单独的服务器响应，则必须提供完整路径。
在端口 8000 上表达并在端口 3000 上做出反应。如果我将两者都部署在自己的服务器上会发生什么？
在这种情况下，如何使用来自反应代码的 /public(express server) 相对路径？你应该只使用完整路径。或将您的图像移动到 reactjs 服务器

标签： mysql node.js reactjs express

【解决方案1】：

静态资源的路由是/static/ 所以我假设你必须像这样调用图像（例如#2）

app.use('/static', express.static('public'))

但你是通过/public/请求的

{
  id: 2,
  name: "Desktop Dell",
  serial: "456-123",
  tag: "IT.CD.19052018-002",
  image: "static/images/dell.jpg"
}

因此，如果您希望原始 JSON 的路径正常工作，请将其更改为

app.use('/public', express.static(__dirname + '/public'));

来自 express.js 文档： http://expressjs.com/en/starter/static-files.html

但是，您提供给 express.static 函数的路径是相对于您启动节点进程的目录的。如果您从另一个目录运行 express 应用程序，使用您要服务的目录的绝对路径会更安全

【讨论】：

你能确认文件夹 public 包含例如图片/dell.jpg?
我应该把图片放在 public/images 还是 public/static/images 中？
进入你的文件系统上的public/images/...，中间件使它可以通过http/static/images/...使用
离开是什么意思？
对不起，我之前的意思是，#3 无论我使用哪个函数，总是显示图像，现在根据您的建议，app.use('/public', express.static(__dirname + '/public '));它没有出现。

【解决方案2】：

对于 express 中间件app.use(express.static('public')) 很好，问题是您需要使用正确的路径。在你的 json 数据中，图像是 public/images/dell.jpg 应该是 /public/images/dell.jpg 但你可以使用

<img src={ '/' + item.image} />

希望对你有帮助

【讨论】：

【解决方案3】：

因此，通过向 React 应用添加代理，我不需要提供链接的完整 url。

如果 express 端口是 8000，那么将这一行放在 React App 的 package.json 中，而不是 Node 应用。

"proxy": "http://localhost:8000"

现在我可以使用 images/name.jpg 并显示图像。

【讨论】：