Angular 2+ Как получить динамически добавленные изображения после угловой сборки

Question

Hy, я работаю над приложением, использующим Angular 5 в качестве внешнего интерфейса и Node.js в качестве внутреннего, который загружает изображения на сервер. Проблема в том, что после того, как я загружаю изображение на сервер, я не могу отобразить его в угловом формате. Моя структура папок выглядит так:

AppName / client / src / app / app.component.html <- Здесь я хочу отобразить изображения; AppName / сервер / pulic / images <- это место где хранятся изображения </p>

У кого-нибудь есть идеи?

Answer 1

Вы должны настроить свой сервер, чтобы при необходимости отображать правильное изображение. Проблема не в Angular.

Если вы используете express , вы можете добавить следующее правило перед обслуживанием веб-приложения:

app.use(express.static('server/public/images'));

Исправьте приведенный выше код с вашим относительным путем.

Таким образом, когда ваш веб-сервер получит запрос, он сначала увидит, содержится ли это изображение в вашей папке, в противном случае оно будет обслуживать Angular.

---

Примечание

Таким образом, если вы попытаетесь получить доступ к несуществующему изображению, вы получите результат text/HTML с вашей веб-страницей в качестве содержимого и 200 в качестве кода состояния.

Вам может потребоваться проверить расширение файла, если оно jpg, jpeg, png или gif, которое вы ищете в папке, если изображение существует, вы отправляете его как ответ, и если оно не не существует, вы отправляете 404 код состояния.

Если расширение не является одним из вышеперечисленных, то вы в любом случае обслуживаете веб-приложение.

app.use(express.static('server/public/images'));
app.get(/\.(jpg|jpeg|png|gif)$/, function(req, res) {
  res.status(404).send('Not found');
});