web-dev-qa-db-ja.com

Angular 4 Img srcが機能していません

angular 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）と表示されます。手伝って頂けますか？

htmlimageangularsrc
50
Annk

AngularJS

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

Angular

<img [src]="imagePath">
70
Yoav Schniederman

画像をアセットフォルダーにコピーします。 Angularは、アセットフォルダーの画像や構成ファイルなどの静的ファイルにのみアクセスできます。

このようにしてみてください：<img src="assets/img/myimage.png">

50
CharanRoot

アセットフォルダーの下に画像フォルダーを作成する

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

コンポーネントで、次のような変数を割り当てます。

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>
7
Deepak Jha

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

３。

<div> <img bind-src="myImage"/> </div>
4
Fakh Ri

問題は、どういうわけか、変数によってsrcに挿入されたときにパスが認識されないことでした。このような変数を作成する必要がありました。

path：any = require（ "../../ img/myImage.png"）;

srcで使用できます。みんな、ありがとう！

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

画像フォルダとindex.htmlは同じディレクトリにある必要があります（次のディレクトリ構造に従ってください）。ビルド後でも動作します

ディレクトリ構造

-src
    |-images
    |-index.html
    |-app
2
Kapil Thakkar

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

コンポーネントでDoCheckインターフェースを実装し、過去のデータベースの式。データベースクエリは単なるサンプルです。

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

そして、html tamplate <div [innerHtml]="concatedPathName"></div>

2
Mises

Angular 2、2+属性バインディングの動作に関する重要な観察。

次の操作中に[src]="imagePath"が機能しない問題：

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

バインディング宣言が原因で、[src]="imagePath"はコンポーネントのthis.imagePathに直接バインドされます。または、ngForループの一部である場合は、*each.imagePathです。

ただし、他の2つの有効なオプションでは、HTMLの文字列をバインドするか、まだ定義されていない変数にHTMLをバインドできます。

<img src=garbage*Th_i$.ngs>をバインドする場合、HTMLはエラーをスローしませんが、Angularはバインドします。

私の推奨事項は、変数が定義されていない可能性がある場合はインラインifを使用で、たとえば<img [src]="!!imagePath ? imagePath : 'urlString'">のようになりますが、node.src = imagePath ? imagePath : 'something'としてもかまいません。

欠落している可能性のある変数へのバインドを避けるか、その要素で*ngIfを十分に活用してください。

1
Gabriel Balsa Cantú

デフォルトとして画像の幅を指定する必要があります

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

他のすべての代替方法に基づいて私のために働いています。

1
ionMobDev

これを試して：

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

画像パスを追加するには、angularでこのコードを使用する必要があります。画像が資産フォルダーの下にある場合。

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

アセットフォルダーの下にない場合は、このコードを使用できます。

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

Angular.jsonに追加します

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

そして、次のように使用します：<img src={{imgPath}} alt="img"></div>

そしてts：storyPath = 'assets/images/myImg.png';

0
Dragomir Vasile Georgiana Lari

Angular-cliのデフォルトでは、ビルドオプションにアセットフォルダーが含まれています。画像の名前にスペースまたはダッシュが含まれていると、この問題が発生しました。例えば ​​：

  • 「my-image-name.png」は「myImageName.png」である必要があります
  • 「my image name.png」は「myImageName.png」である必要があります

Asset/imgフォルダーに画像を配置すると、次のコード行がテンプレートで機能するはずです。

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

問題が解決しない場合は、Angular-cli構成ファイルを確認し、アセットオプションがビルドオプションに追加されていることを確認してください。

0
jmuhire

アセットフォルダーが含まれている場合は、app-> asset：[]でyour.angular-cli.jsonをチェックインします。

または多分ここに何か： https://github.com/angular/angular-cli/issues/2231 、助けることができる。

0
chassis