img src gives Template parse errors in angular2

Question

My code is as shown below:

test.html

<div class="q-img-container">
    <img id="q-order-img" src="../img/ic_truck.png" alt=""></img>
</div>

But it gives me following error:

"Unhandled Promise rejection:"
"Template parse errors:
Void elements do not have end tags "img" ("iv class="q-img-container">
                <img id="q-order-img" src="../img/ic_truck.png" alt="">[ERROR ->]</img>
            </div>

My directory structure is as follows:

---app
------img
----------ic_truck.png
------template
----------test.html

What am I missing here?

Yes, it worked. The above line in question worked fine in angular 1 , why it is rejected in angular2 — Mrugesh, Sep 25 '17 at 17:40

Yogesh · Accepted Answer · 2017-09-25T18:08:54.680

6

img tag is a void element. Such elements cannot have any content and are forbidden to be closed (W3C recommendation).

As the error message says, remove the end tag </img>.

Just use following

<img id="q-order-img" src="../img/ic_truck.png" alt="">

Please refer to this answer.

edited Sep 25 '17 at 18:08

answered Sep 25 '17 at 17:36

Yogesh

699
1
6
21

img src gives Template parse errors in angular2

1 Answers1