Как отобразить изображение в Angular со статического бэкэнда?

Question

У меня есть путь в серверной части, где я сохраняю свои изображения. Я могу получить путь от Монго и воспроизвести его в угловом формате, но когда я использую тег с src bind, он не показывает изображение и никаких ошибок:

Путь внутри компонента:

this.profileService.getImg().subscribe(res => this.imagePath = res['img']);

Возвращение журнала консоли:

console.log(this.imagePath);

http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg

HTML-тег:

<img [src]="imagePath">

Я пробовал несколько способов, которые я нашел в других сообщениях, но не смог заставить его работать. Любая идея о том, что происходит и как я могу решить эту проблему?

Обновления и более подробная информация

На стороне сервера я таким образом возвращаю путь из Монго:

router.get('/:id', (req, res, next) => {
    Avatar.getAvatarById(req.params.id, (err, avatar) => {
        if(err) throw err;
        if(!avatar){
            return res.json({success: false, msg: 'No avatars found'});
        }
        res.json({
            success: true,
            avatar: avatar
        });
    });
});

Где Avatar.getAvatarById - это:

module.exports.getAvatarById = function(id, callback){
    const query = { avatar: {$regex: ".*"+id+".*" }}
    Avatar.findOne(query, callback);
}

И я выставляю путь аватаров так:

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

Когда я пытаюсь получить доступ к пути, нажав http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg в браузере, он возвращает json вместо рендеринга изображения.

{
 "success":true,
 "avatar": {
     "_id":"5dc17fc9f383424158c59754", 
     "avatar":"http://localhost:3000/avatars/5db84cdf4c6efe073864f9e7.jpeg","__v":0
 }
}

Также пытался преодолеть безопасность с помощью bypassSecurityTrustResourceUrl и использовать *ngЕсли отобразить, когда URL-адрес есть.

this.photoUrl = this.sanitizer.bypassSecurityTrustUrl(res['avatar']['avatar']);

<img *ngIf="photoUrl" [src]="photoUrl">

Он не возвращает никаких ошибок и стиль не отображает изображение.

Если я попытаюсь, нажав путь внутри bypassSecurityTrustUrl функция для проверки и удаления * ngIf, она возвращает:

null:1 GET http://localhost:4200/null 404 (Not Found)

Answer 1

Вы можете статически загружать изображения из папки ресурсов в проекте Angular. В качестве альтернативы вы можете извлекать изображения статически из конечной точки. Вы можете преодолеть безопасность на месте с помощью Angular, используя bypassSecurityTrustResourceUrl

environment.ts

export const environment = {
  production: false,
  apiURL: 'http://localhost:8080/your-api/v1',
  imageUrl: '/assets/images/yourImage',
};

component.html

<img [src]="imageUrl">

component.ts

photoUrl: SafeResourceUrl;
  ngOnInit() {
    this.urlService.siteProfile.subscribe(s => {
      this.siteProfile = s;
      if(s != null) {
        this.photoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.apiUrl}/image-directory/your-pic?id`);
      }
    });

Answer 2

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

Даже тем, кто мне не помогцитата, я очень благодарен за ваше время, пытаясь помочь мне!

1-й. Кредиты @ HenryDev

Вы пытались вставить тип изображения в URL? и проверьте, можете ли вы увидеть изображение? просто поместите это в локальный хост URl: 3000 / avatars / 5db84cdf4c6efe073864f9e7.jpeg и скажите нам, что вы видите

После того, как я попробовал это, я начал думать, что что-то не так с моим бэкэндом из-за возвратаэта попытка была json вместо рендеринга изображения.

2nd. Кредиты на @ Thatkookooguy

Использование определенного res.sendFile:

app.get('/avatars/:name', function (req,
res, next) {   const fileName = req.params.name;  
res.sendFile(fileName, options, function (err) { /* ... */ }); });

На сервере я использовал маршрут, чтобы найтиаватар, сохраненный в базе данных с тем же путем '/avatars/:id'. Поэтому каждый раз, когда я пытался получить к нему доступ, приоритетом был маршрут.

Из-за этого, когда я пытался получить доступ к изображению, нажав путь в браузере, он возвращал файл json вместо отображения изображения.

РЕШЕНИЕ

Итак, решение состояло в том, чтобы заменить маршрут для вызова функции для извлечения списка изображений!

Однако,Как я уже говорил, я получил здесь множество советов, которые дали мне возможность улучшить мой код:

3-й. Кредиты на @ Ian Halfpenny

Вы можете преодолеть безопасность на месте с помощью Angular с помощью bypassSecurityTrustResourceUrl

Поэтому я заменил свой код с помощью bypassSecurityTrustResourceUrl.

4-й. Кредиты @ dota2pro

Используйте * ngIf для отображения изображения после загрузки ссылки. (Он был отредактирован и удален. Поэтому я извиняюсь за то, что не показал ваш первоначальный вклад) Теперь я показываю в своем html, тестируя ранее с *ngIf="avatar"

Answer 3

В моей системе мы используем URL-адрес сервлета для тега image src, который возвращает строку base64 из образа image без проблем.

Answer 4

Вам необходимо предоставить файл с вашего сервера node.js вашему веб-интерфейсу. Прямо сейчас звучит так, будто вы предоставляете клиенту только строку пути, а не сам файл.

Вы можете сделать это, либо определив статическую папку на вашем сервере для хранения. все ваши статические файлы или выставив определенные файлы, используя res.sendFile , указав путь и перейдя к любой папке, которую вы хотите получить, чтобы получить этот файл.

Используя статическую папку:

// connect the avatars folder as the `/avatars` server sub path
app.use('/avatars', express.static('avatars'));

Использование определенных res.sendFile:

app.get('/avatars/:name', function (req, res, next) {
  const fileName = req.params.name;
  res.sendFile(fileName, options, function (err) { /* ... */ });
});

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

Answer 5

Вы пробовали

<img [attr.src]="imagePath">

Или в случае, если обнаружение изменений является проблемой здесь:

this.imagePath$ = this.profileService.getImg().pipe(
  map(res => res['img']),
);

<img [src]="imagePath$ | async">

Answer 6

Использование привязки свойства должно сработать:

 <img [src]="imagePath">

, но вы также можете попробовать интерполяцию строк :

 <img src="{{imagePath}}">