如何在expressjs上加载静态图像

sigwle7e 于 2021-06-23 发布在 Mysql

关注(0)|答案(3)|浏览(304)

所以我有一个为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>
      );
    })
  }
}

皮克特

mysql node.js reactjs express

来源：https://stackoverflow.com/questions/50523432/how-to-load-static-images-on-expressjs

3条答案

按热度按时间

wyyhbhjk1#

静态资产的路径是 /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 documentation:httphttp://expressjs.com/en/starter/static-files.html
但是，提供给express.static函数的路径是相对于启动节点进程的目录的。如果从另一个目录运行express应用程序，则使用要服务的目录的绝对路径更安全

赞(0）回复(0）举报 2021-06-23

omvjsjqw2#

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