找不到Angular 4 img src

我在获取角度为4的图像时遇到问题。它一直告诉我找不到该图像。

资料夹结构：

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

我在中使用图片mycomponent。如果在中mycomponent，则直接用以下命令插入：

<img src="img/myimage.png"

这工作正常，但我检查了html并创建了一个哈希。但是我的图片必须动态添加到html中，因为它们是列表的一部分。所以，如果我使用：

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

基本上img/myimage.png，这是行不通的。如果我使用：

<img [src]="imagePath">

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

AngularJS

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

角度的

<img [src]="imagePath">

将图像复制到资产文件夹。Angular只能从资产文件夹访问静态文件，例如图像和配置文件。

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

在素材资源文件夹下创建图片文件夹

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

角度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'

在您的组件中分配一个变量，例如

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>

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

好吧，问题在于，以某种方式，当src变量插入路径时无法识别。我必须创建一个像这样的变量：

path:any = require("../../img/myImage.png");

然后我可以在中使用它src。谢谢大家！

您必须提及图像的宽度作为默​​认值

 <img width="300" src="assets/company_logo.png">

它基于所有其他替代方式为我工作。

<img src="images/no-record-found.png" width="50%" height="50%"/>

您的图片文件夹和index.html应该在同一目录中（遵循以下目录结构）。它甚至可以在构建后工作

目录结构

-src
    |-images
    |-index.html
    |-app 

Angular只能从资产文件夹访问静态文件，例如图像和配置文件。下载远程存储图像的字符串路径并将其加载到模板的好方法。

  public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

在Component imlement DoCheck接口中，并在其中包含数据库公式。数据库查询只是一个示例。

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

并且在html tamplate中 <div [innerHtml]="concatedPathName"></div>

关于Angular 2、2+属性绑定如何工作的重要观察。

[src]="imagePath"在执行以下操作时无法正常工作的问题：

• <img src="img/myimage.png">
• <img src={{imagePath}}>

由于您的绑定声明，[src]="imagePath"直接绑定到Component的绑定声明，this.imagePath或者如果它是ngFor循环的一部分，则绑定*each.imagePath。

但是，在其他两个工作选项上，您要么在HTML上绑定字符串，要么允许HTML绑定到尚未定义的变量。

如果您绑定<img src=garbage*Th_i$.ngs>，HTML不会引发任何错误，但是Angular会抛出任何错误。

我的建议是使用inline-if，以防可能未定义变量，例如，as<img [src]="!!imagePath ? imagePath : 'urlString'">可以是as node.src = imagePath ? imagePath : 'something'。

避免绑定到可能缺少的变量或*ngIf在该元素中充分利用。

如果您已包含资产文件夹，请在app-> asset：[]下检查your.angular-cli.json。

也许这里有一些东西：https : //github.com/angular/angular-cli/issues/2231可以提供帮助。

您必须以成角度的角度使用此代码来添加图像路径。如果您的图像在资产文件夹下，则。

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

如果不在资产文件夹下，则可以使用此代码。

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

默认情况下，Angular-cli在构建选项中包括资产文件夹。当我的图像名称带有空格或破折号时，出现了此问题。例如 ：

• “ my-image-name.png”应为“ myImageName.png”
• “我的图片名.png”应为“ myImageName.png”

如果您将图片放在assets / img文件夹中，那么以下代码行应在您的模板中起作用：

<img [alt]="My image name" src="./assets/img/myImageName.png'">

如果问题仍然存在，请检查您的Angular-cli配置文件，并确保在构建选项中添加了资产文件夹。

添加angular.json

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

然后像这样使用它： <img src={{imgPath}} alt="img"></div>

在ts中： storyPath = 'assets/images/myImg.png';

尝试这个：

<img class="img-responsive" src="assets/img/google-body-ads.png">