Блог

Я искал здесь и не нашел решения, поэтому я спрашиваю. Как я могу обслуживать свои статические изображения, расположенные на сервере nodejs:

 public/img
  

Nodejs (до app.listen()):

 app.use("/api", routesIndex);
app.use(express.static(__dirname   '/public/img'));
  

Шаблон Angular 10:

 <img class="center" [src]="quizService.rootUrl '/public/img/' quizService.questions[quizService.questionProgress].imageName '.jpg'">
  

[src] преобразуется в абсолютно правильный путь к:

 http://localhost:5000/api/public/img/shark.jpg
  

Но он все еще показывает 404. Есть идеи?

Спасибо

Выполните следующие действия,

 your image is at path Public/img/shark.jpg
  

в вашем app.js это должно быть до создания любого маршрута

 app.use(express.static(__dirname   '/public/img'));
  

создайте маршрут, как показано ниже

 app.get('/Image/:id', function (req, res) {
    // logic to find image based on id passed, we will assume it results in shark.jpg
    const filepath = `${__dirname}/public/img/shark.jpg`;
    res.sendFile(filepath);
});
  

Теперь используйте эту конечную точку из вашего кода angular

 localhost:{PORT_NUMBER}/Image/{ID_FOR_SHARK_IMAGE}
  

Нет необходимости добавлять путь к статически обслуживаемому каталогу. Просто удалите ‘/ public/img/’

 <img class="center" [src]="quizService.rootUrl   quizService.questions[quizService.questionProgress].imageName '.jpg'">
  

Вы можете получить доступ ко всем файлам вашего обслуживаемого каталога напрямую. Нравится:

 http://localhost:5000/shark.jpg
  

Я заставил его работать, выполнив следующее:

Nodejs добавил путь:

 const path = require("path");

app.use(express.static(path.join(__dirname, 'public/img')));
  

Затем в Angular создан отдельный assetURL, в котором отсутствует часть baseUrl «/api»:

 [src]="quizService.assetUrl '/' quizService.questions[quizService.questionProgress].imageName '.jpg'"
  

и теперь мои изображения обслуживаются.