img src会导致Angular2中的模板解析错误。

Question

我的代码如下所示：

test.html

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

但是它给了我以下错误：

"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>

我的目录结构如下所示：

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

我在这里错过了什么？

- Mrugesh

---

删除结束标签 </img>。 - hjm

是的，它起作用了。上述问题中的代码在Angular 1中运行良好，为什么在Angular2中被拒绝了呢？ - Mrugesh

Answer 1

img标签是一个空元素。这些元素不能有任何内容，并且禁止关闭它们(W3C推荐)。

正如错误信息所说，删除结束标记</img>即可。

只需使用以下代码：

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

请参考这个答案。

- Yogesh