Как кодировать сегмент URL в Angular 7 в шаблоне для URL изображения - PullRequest
Новая
       16

Как кодировать сегмент URL в Angular 7 в шаблоне для URL изображения

1 голос
/ 15 мая 2019

У меня есть следующий бит кода, который является моей попыткой кодирования URL: 

<img src="{{ '/assets/images/animals/' + (data.animal.image | encodeURIComponent) }}" alt="" class="animal" />

Я получаю ошибку: 

The pipe 'encodeURIComponent' could not be found

Я предполагаю, что такой трубы нет, или я должен что-то импортировать.

Как правильно это сделать, желательно все в шаблоне?

По запросу, вот пример данных 

data = { "animal" : { id: 1; image:"dog.png"; } }

1 Ответ

1 голос
/ 15 мая 2019

У вас есть несколько вариантов:

  1. Этот метод использует CSS и устанавливает изображение в качестве фона, чтобы оно лучше меняло размер.

    <div [style.backgroundImage]="'url('+ image +')'" class="image"></div>

  2. Используйте Angular sanitizer, чтобы убедиться, что URL не содержит опасного скрипта https://angular.io/api/platform-browser/DomSanitizer

  3. Вызовите функцию, чтобы вычислить URL, затем она может запустить кодирование, которое вы хотите. <img [src]="getImageUrl(data.animal.image)" />

...