ExpressJに静的画像をロードする方法

bugfix> mysql > 投稿

したがって、MySQLデータベースを提供するこのノード/エクスプレス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アプリが画像を表示できる唯一の方法は、#3のようにデータベースの完全なURLを使用することです。

完全な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

回答 3 件

  • エクスプレスミドルウェア app.use(express.static('public')) の場合  問題ありませんが、正しいパスを使用する必要があります。あなたのJSONデータでは、画像は public/images/dell.jpg です  これは /public/images/dell.jpg でなければなりません  しかし、あなたは使うことができます

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

    同様に、これが役立つことを願っています

  • 静的資産のルートは /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

    However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve

  • そのため、Reactアプリにプロキシを追加することにより、リンクへの完全なURLを提供する必要がありません。

    エクスプレスポートが8000の場合、この行をNodeアプリではなく、Reactアプリのpackage.jsonに配置します。

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

    これで、images/name.jpgを使用でき、画像が表示されます。

あなたの答え

関連記事