Как настроить загрузку картинок Express middleware?

Question

Ninja Mate @victorzadorozhnyy

Как настроить загрузку картинок Express middleware?

Наткнулся вот на это Express и пытаюсь заставить свою сборку работать с картинками
Вот файл devServer.js

app.use(require('webpack-hot-middleware')(compiler));

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

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Ссылка на картинку <Image src="static/public/thumb.jpg" rounded />
Где я не прав почему к jpg путь не совпадает?
Правильно ли я в src размещаю public, ведь статик добавляется автоматически?

Вопрос задан более трёх лет назад
851 просмотр

16 комментариев

Подписаться 1 Оценить 16 комментариев

Андрей Антропов @Laiff

Для сборки приложения используется webpack?

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Андрей Антропов: да

Написано более трёх лет назад
pomeo @pomeo

devServer.js где лежит, в корне приложения или в подпапке какой-то?

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: в корне

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: картинка у вас уже лежит в папке или её webpack у себя держит?

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: в папе. сейчас уже в src (нужно конечно переделать). если посмотрите ответ Андрей Антропова чуть ниже, то там в комментариях моя версия прямо сейчас. но это ни к чему не обязывает. задача сделать среду разработки которая работает еще и с картинками и при сборке выдает bundle.js и папку с картинками

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: если у вас лежит картинка в папке /public/thumb.jpg, то строка app.use('/static', express.static('public')); делает её доступной по /static/public/thumb.jpg точно. Здесь webpack вообще не учавствует.

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: или попробуйте так например app.use('/static', express.static(path.resolve(__dirname, 'public')));

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: \src\thumb.jpg Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: ошибка от webpack, а не express

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: а мне никакой loader не нужен случайно? как для css к примеру

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: вы там случайно уже AssetsPlugin не вделали и "import thumb from './thumb.jpg';" используете? Сделайте сначала без лишних переменных и так не в работающей формуле. Ваша изначальная проблема, что не доступен лежащий файл в папке по какой-то причине при определении папки в экспрессе. Webpack в этой проблеме не участвует никак. А в данный момент вы ещё ошибок от webpack намешиваете.

Написано более трёх лет назад
Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: да вы правы намешал конечно. но все исправил. Проблема та же при dev сборке нет public папки вообще. А если все собрать на продакшен, то конечно работает тк ссылка правильно показывает на картинку

Написано более трёх лет назад
pomeo @pomeo

Ninja Mate: package.json покажите

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

{
  "name": "react-effort-tracker-boilerplate",
  "version": "0.0.1",
  "description": "A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.",
  "scripts": {
    "clean": "rimraf dist",
    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build": "npm run clean && npm run build:webpack",
    "start": "node devServer.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/daviscom/efforttrackerv2.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack",
    "babel",
    "react-transform"
  ],
  "author": "Ninja Mate <info@ninjamate.com> ",
  "license": "CC0-1.0",
  "bugs": {
    "url": "https://github.com/daviscom/efforttrackerv2.git/issues"
  },
  "homepage": "http://davisdotcom.com.au/efforttracker_wp/",
  "devDependencies": {
    "assets-webpack-plugin": "^3.3.0",
    "babel-core": "^6.3.15",
    "babel-eslint": "^5.0.0-beta4",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.0",
    "cross-env": "^1.0.6",
    "eslint": "^1.10.3",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-react": "^3.11.3",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "rimraf": "^2.4.3",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  },
  "dependencies": {
    "react": "^0.14.7",
    "react-bootstrap": "^0.28.3",
    "react-bootstrap-datetimepicker": "0.0.22",
    "react-dom": "^0.14.3",
    "react-router": "^2.0.0"
  }
}

Написано более трёх лет назад

Ninja Mate @victorzadorozhnyy Автор вопроса

Sergey Ovechkin: вот он

Написано более трёх лет назад

Для сборки приложения используется webpack?
devServer.js где лежит, в корне приложения или в подпапке какой-то?
Ninja Mate: картинка у вас уже лежит в папке или её webpack у себя держит?
Sergey Ovechkin: в папе. сейчас уже в src (нужно конечно переделать). если посмотрите ответ Андрей Антропова чуть ниже, то там в комментариях моя версия прямо сейчас. но это ни к чему не обязывает. задача сделать среду разработки которая работает еще и с картинками и при сборке выдает bundle.js и папку с картинками
Ninja Mate: если у вас лежит картинка в папке /public/thumb.jpg, то строка app.use('/static', express.static('public')); делает её доступной по /static/public/thumb.jpg точно. Здесь webpack вообще не учавствует.
Ninja Mate: или попробуйте так например app.use('/static', express.static(path.resolve(__dirname, 'public')));
Sergey Ovechkin: \src\thumb.jpg Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Sergey Ovechkin: а мне никакой loader не нужен случайно? как для css к примеру
Ninja Mate: вы там случайно уже AssetsPlugin не вделали и "import thumb from './thumb.jpg';" используете? Сделайте сначала без лишних переменных и так не в работающей формуле. Ваша изначальная проблема, что не доступен лежащий файл в папке по какой-то причине при определении папки в экспрессе. Webpack в этой проблеме не участвует никак. А в данный момент вы ещё ошибок от webpack намешиваете.
Sergey Ovechkin: да вы правы намешал конечно. но все исправил. Проблема та же при dev сборке нет public папки вообще. А если все собрать на продакшен, то конечно работает тк ссылка правильно показывает на картинку
{ "name": "react-effort-tracker-boilerplate", "version": "0.0.1", "description": "A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.", "scripts": { "clean": "rimraf dist", "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", "build": "npm run clean && npm run build:webpack", "start": "node devServer.js", "lint": "eslint src" }, "repository": { "type": "git", "url": "https://github.com/daviscom/efforttrackerv2.git" }, "keywords": [ "react", "reactjs", "boilerplate", "hot", "reload", "hmr", "live", "edit", "webpack", "babel", "react-transform" ], "author": "Ninja Mate <info@ninjamate.com> ", "license": "CC0-1.0", "bugs": { "url": "https://github.com/daviscom/efforttrackerv2.git/issues" }, "homepage": "http://davisdotcom.com.au/efforttracker_wp/", "devDependencies": { "assets-webpack-plugin": "^3.3.0", "babel-core": "^6.3.15", "babel-eslint": "^5.0.0-beta4", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-react-hmre": "^1.0.0", "cross-env": "^1.0.6", "eslint": "^1.10.3", "eslint-plugin-babel": "^3.0.0", "eslint-plugin-react": "^3.11.3", "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", "rimraf": "^2.4.3", "webpack": "^1.12.9", "webpack-dev-middleware": "^1.4.0", "webpack-hot-middleware": "^2.6.0" }, "dependencies": { "react": "^0.14.7", "react-bootstrap": "^0.28.3", "react-bootstrap-datetimepicker": "0.0.22", "react-dom": "^0.14.3", "react-router": "^2.0.0" } }

Answer 1 · 2016-03-04 09:33:38

Так как для сборки используется webpack, то можно использовать AssetsPlugin

import thumb from './thumb.jpg';

<Image src={thumb} rounded />

Пак сам сконфигурироует путь и имя фаила, и из этого есть еще одно следствие класть ремурсы рядом с компонентами где они используются

Как настроить загрузку картинок Express middleware?

Войдите на сайт