Question

所以我有这个节点/表达api服务于MySQL数据库，有这样的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。

如何在不使用完整网址的情况下显示图片？

编辑：添加渲染功能

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

Answer 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函数的路径是相对于启动节点进程的目录。如果您从另一个目录运行快速应用程序，使用您要提供的目录的绝对路径更安全

Answer 2

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

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

同样希望这会有所帮助

Answer 3

因此，通过向React app添加代理，我不需要为链接提供完整的URL。

如果快速端口是8000，那么将此行放在React App的package.json中，而不是Node应用程序。

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

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

如何在ExpressJs上加载静态图像

3 个答案: