找不到Angular 4 img src答案

【问题标题】：Angular 4 img src is not found找不到Angular 4 img src
【发布时间】：2017-12-15 21:18:27
【问题描述】：

我在获取角度为 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)。你能帮帮我吗？

【问题讨论】：

你能创建一个 plnkr 吗？ BTW [src]="imagePath" 是 Angular 4 的正确实现
我猜你的图片路径不正确！
@bhantol 是的，我知道这就是我失去理智的原因。我的 imagePath 就像“img/myimage.png”，当我使用 [src]="imagePath" 时它说找不到。
如果您可以在单独的窗口中键入htttps://localhost/img/myimage.png，但它仍然显示未找到，那么正如@YordanNikolov 建议的那样，无论角度如何，它都不存在。
我从 http 请求中获取图像数组并使用 ngfor 推入数组并显示。对于第一组它可以工作，并且在页面滚动后动态获取图像不起作用。你能告诉我是什么

标签： html image angular src

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

  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;
  }

在组件实现 DoCheck 接口中，并在其中添加数据库公式。数据库查询只是一个示例。

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

在html模板中<div [innerHtml]="concatedPathName"></div>

【讨论】：

【解决方案5】：

添加 angular.json

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

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

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

【讨论】：

【解决方案6】：

Angular-cli 默认在构建选项中包含 assets 文件夹。当我的图像名称有空格或破折号时，我遇到了这个问题。例如：

'my-image-name.png' 应该是 'myImageName.png'
“我的图片名称.png”应该是“myImageName.png”

如果您将图像放在 assets/img 文件夹中，那么这行代码应该可以在您的模板中使用：

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

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

【讨论】：

【解决方案7】：

您必须在 Angular 中使用此代码来添加图像路径。如果您的图像在资产文件夹下。

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

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

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

【讨论】：

【解决方案8】：

AngularJS

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

角度

<img [src]="imagePath">

【讨论】：

2/4 示例不适合我<img [ERROR ->][src]="../assets/images/hellotravelindia-small.png">
检查你的img源路径
@HidaytRahman - 像这样使用 - src="assets/images/hellotravelindia-small.png"
我从 http 请求中获取图像数组并使用 ngfor 推入数组并显示。对于第一组它可以工作，并且在页面滚动后动态获取图像不起作用。你能告诉我为什么吗

【解决方案9】：

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

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

【讨论】：

我从 http 请求中获取图像数组并使用 ngfor 推入数组并显示。对于第一组它可以工作，并且在页面滚动后动态获取图像不起作用。你能告诉我什么\
没错！！我遇到了同样的问题，你的解决方案很有魅力。非常感谢。

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

关于 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 以防可能未定义变量，例如 <img [src]="!!imagePath ? imagePath : 'urlString'">，也可以是 node.src = imagePath ? imagePath : 'something'。

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

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

目录结构

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

【讨论】：

【解决方案14】：

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

myImage : string = "http://example.com/path/image.png";

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

1.

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

2 。

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

3 .

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

【讨论】：

在这三个中，第一个是 IDE 和 lint 对您的尖叫最少的一个。

【解决方案15】：

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

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>

【讨论】：

【解决方案16】：

你必须提到图像的默认宽度

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

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

【讨论】：