Angular 2图片未显示

Question

所以我有一个非常基本的问题。

图像未显示在我的Angular 2应用程序中。

这就是我定义图像的方式：

<img alt="logo" [src]="'./images/logo.png'">

我是否应该安装一个软件包以使图像正常工作？

顺便说一句，您可能会猜到我对Angular是陌生的！

Answer 1

属性绑定（'[]'）：将视图元素的属性设置为模板表达式的值。

 <img alt="logo" src="'./images/logo.png'"> 

很好

Answer 2

如果您的图片网址是一个已知值（如您在此处指示的那样），则无需任何特殊的角度属性绑定。

只需使用常规HTML指定图像标签：

<img alt="logo" src="images/logo.png">

请注意，上面的路径是相对路径

Answer 3

您需要安装图像加载器

尝试使用文件加载器，那么您应该在Webpack中添加此规则

    module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

它现在应该工作