Angular2示例中的图像路径混淆

Question

参考

Plunker

在 app.component.ts 中， imagePath 定义在 angular.png ， 但是，在代码库中，图片实际上被命名为 angular.base64.png 。

 <img [src]="imagePath">

图像如何显示？

Answer 1

好的，考虑一下，

问：你能否在给定的plunker中创建一个名为 MyImages 的文件夹？ 答：是的

问：怎么样？
答：点击 新文件 ，窗口弹出窗口会询问文件夹名称，并为其命名，如 MyImages 。

到目前为止一切顺利。

问：现在如何在 MyImages 文件夹中插入或添加图片？有可能吗？
A：我想知道我不知道怎么做。

注意：在plunker中将图像添加到文件夹中并不像在Windows-7/8/10中添加图像那么简单（试一试并检查是否存在那很容易吗？）。

对你的答案的问题是，

.base64.png仅显示/表示扩展名为.png的base64编码文件。所以它只是一个用base64编码的图像文件。这就是它。

其他东西就像使用plunker一样简单。不是吗？

Answer 2

这显然是一个Plunker功能。 Plunker不允许上传二进制文件，但您可以对文件进行base64编码并将其添加为name.base64.ext的文本文件，运行代码的iframe可以使用name.ext访问数据URL。