how to do pipe to src attribute angular

Question

If I do: <h2>{{event.role | lowercase}}</h2>. However, if I try to use it in an src attribute like this:

<img src={{event.eventName | lowercase}} alt="">

I get the error:

core.js:6237 ERROR DOMException: 
Failed to execute 'setAttribute' on 'Element': '|' is not a valid attribute name.

It is not recognizing the pipe, however, not using the pipe works correctly so the format {{event.eventName}} seams to work. How should I do it?

Answer 1

You need to use quotes around the expression, otherwise angular will not be able to parse your expression

<img src="{{ event.eventName | lowercase }}" alt=""

Or

<img [src]="event.eventName | lowercase" alt=""