Как загрузить статические изображения на ExpressJs

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.

Как я могу отобразить изображение, не используя полный 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

Answer 1

Для Express Middleware app.use(express.static('public')) нормально, проблема в том, что вам нужно использовать правильный путь.В ваших данных JSON, изображение public/images/dell.jpg, которое должно быть /public/images/dell.jpg, но вы также можете использовать

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

, надеюсь, это поможет

Answer 2

Поэтому, добавив прокси-сервер в приложение React, мне не нужно указывать полный URL-адрес ссылки.

Если экспресс-порт 8000, поместите эту строку в package.json из React.Приложение, а не приложение Node.

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

Теперь я могу использовать images / name.jpg, и изображение будет отображаться.

Answer 3

Маршрут для статических ресурсов - /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, относится к каталогу, из которого вы запускаете процесс вашего узла.Если вы запускаете экспресс-приложение из другого каталога, безопаснее использовать абсолютный путь к каталогу, который вы хотите обслуживать