Question

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

文件夹结构： Here

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

<img src="img/myimage.png"

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

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

这基本上是＆＃34; img / myimage.png＆＃34;它没有用。如果我使用

<img [src]="imagePath">

它说NOT FOUND（htttps：//localhost/img/myimage.png）。你能救我吗？

Answer 1

AngularJS

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

Angular

<img [src]="imagePath">

Answer 2

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

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

Answer 3

在资源文件夹

下创建图像文件夹

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

Answer 4

组件中的

指定一个变量，如

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 5

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

myImage：string =＆＃34; http://example.com/path/image.png＆＃34;;

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

1。

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

2。

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

3。

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

Answer 6

嗯，问题是，不知何故，当一个变量插入src时，路径无法识别。我必须创建一个这样的变量：

路径：any = require（“../../ img / myImage.png”）;

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

Answer 7

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

您的images文件夹和index.html应位于同一目录中（请遵循以下dir结构）。它甚至可以在构建之后工作

目录结构

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

Answer 8

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模板<div [innerHtml]="concatedPathName"></div>中

Answer 9

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

document.getElementById("btnInsertNode").addEventListener("click", function () { orgchart.insertNode(2, { Name: "New Node" }/*, id optional*/); }); document.getElementById("btnUpdateNode").addEventListener("click", function () { orgchart.updateNode(7, 1, { Name: "7 New the parent node is 1" }); }); document.getElementById("btnRemoveNode").addEventListener("click", function () { orgchart.removeNode(6); });在以下情况下无效的问题：

[src]="imagePath"
<img src="img/myimage.png">

由于您的绑定声明，<img src={{imagePath}}>直接绑定到Component [src]="imagePath"或者它是ngFor循环的一部分，然后是this.imagePath。

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

如果绑定*each.imagePath，HTML不会抛出任何错误，但是Angular会。

我的建议是使用内联 - 如果变量可能未定义，例如<img src=garbage*Th_i$.ngs>，可以是<img [src]="!!imagePath ? imagePath : 'urlString'">。

避免绑定可能缺少的变量或在该元素中充分利用node.src = imagePath ? imagePath : 'something'。

Answer 10

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

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

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

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

Answer 12

在app下检查你的.angular-cli.json - ＆gt;资产：[]如果您已包含资产文件夹。

或者也许在这里：https://github.com/angular/angular-cli/issues/2231，可以提供帮助。

Answer 13

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

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

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

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

Answer 14

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配置文件，并确保在构建选项中添加了资产文件夹。

Answer 15

添加angular.json

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

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

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

Answer 16

尝试一下：

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

Angular 4 Img src无效

16 个答案: