Angular 4 Img src无效

Question

我在角度4的图像src有问题.它一直告诉我没有找到图像.

文件夹结构: 这里

我在mycomponent中使用图像.如果在我的组件中我直接插入

<img src="img/myimage.png"

它工作正常,但我检查了HTML,它创建了一个哈希.但我的图像必须以动态方式添加到html中,因为它们是列表的一部分.所以,如果我使用:

<img src="{{imagePath}}">

这基本上是"img/myimage.png"它不起作用.如果我使用

<img [src]="imagePath">

它说NOT FOUND(htttps://localhost/img/myimage.png).你能帮助我吗？

Answer 1

AngularJS

<img ng-src="{{imagePath}}">

角

<img [src]="imagePath">

Answer 2

将图像复制到assets文件夹中.Angular只能从assets文件夹访问静态文件,如图像和配置文件.

试试这样: <img src="assets/img/myimage.png">

Answer 3

在assets文件夹下创建图像文件夹

<img src="assets/images/logo_poster.png">

Answer 4

角 4 到 8

要么有效

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />

和组件将是

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

树结构：

-> src 
   -> app
   -> assets
      -> images
           'iphone.png'

Answer 5

在你的组件中分配一个变量,如,

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

在你的src中使用这个netImage来获取图像,如下所示,

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Answer 6

@Annk您可以在__component.ts文件中创建一个变量

myImage：string =“ http://example.com/path/image.png ”;

在__。component.html文件中，您可以使用以下三种方法之一：

1。

<div> <img src="{{myImage}}"> </div>

2。

<div> <img [src]="myImage"/> </div>

3。

<div> <img bind-src="myImage"/> </div>