web-dev-qa-db-ja.com

Angular 6アセットから画像をロードできない

何らかの理由で、アプリに画像を表示できません。これはエラー、テスト、およびクラスです。

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

なぜこれが機能しないのでしょうか？ image.pngは、src/assets/image.pngにあるアセットフォルダーにあります。

更新：

そこで、テストを行いました。すべてのノードモジュールとプロジェクトファイルを別のPCにコピーし、イメージが正しくロードされました。したがって、問題はangularプロジェクトの外側にあると思います。

htmlangularimagehttp-status-code-404assets
9
Frank

したがって、問題はangularプロジェクトがエラーを引き起こしていた場所にあったことです。私の場合、それはbitbucketリポジトリにありました。しかし、それがエラーの理由であるかどうかはわかりません。

angularプロジェクト全体を別の場所に移動してみてください。それは私のためにそれを解決しました:)

@ Rak2018のソリューションは、代わりにそれを使用したい場合の良い回避策です

2
Frank
<img class="logo" src="assets/image.png">

これは正しい道であり、おそらく他の何かが間違っていた。

イメージ名またはそのjpegかどうかを確認してください。多分あなたは、資産フォルダに新しいフォルダを追加しましたか？ 、画像の場合、コードは次のようになります

<img class="logo" src="assets/image/image.png">
9
Matan Shushan

src="assets/image.png"は問題なく動作するはずです。イメージに追加してからビルドを再起動しましたか？

3
Anthony DiTomasso

Angular.jsonにアセットフォルダーを追加します。

"assets": [
    "src/assets"
 ],

次に、以下のような画像を参照し、

<img src="/assets/image.png">

これは動作するはずです。

3
jkumaranc

ファイルにアクセスする権限がないためです。

Windowsでの簡単な方法プロジェクトをドライブC：から他のドライブに移動します。うまくいきました。

幸運を。

1
Ali Safari

これを試してください<img class="logo" src="./assets/image.png">

また、画像を右クリックして、拡張子がpngではなくPNGであるかどうかを確認します。

1
Alen

これを試して：

<div class="logo"></div>

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
    background:url('assets/image.png') no-repeat center center;
}
1
Rak2018

アセット（写真など）を含むフォルダーは、angular.json内のassets配列で宣言する必要があります

Angularは、angular.jsonで宣言されたアセットまたはWebからのアセットのみを認識します。

さらに、次の3つのオプションすべてから、次のように機能します。

<img class="logo" src="assets/image.png">
0
Pankkaj

私は同じ問題を抱えていましたが、それを解決しました。以下のように、「src」ディレクトリからアクセスしてみてください：「src/app/assets/YourPhoto.jpg」。

0
user135740

ウェブ上の他のチュートリアルに従って、src\app\assets\imagesフォルダーを作成し、そこに画像を配置しました。ただし、私のアプリには既にsrc\assetsにアセットフォルダーがありました。これには2つの修正があります。

どちらか：

  1. 既存のsrc\assetsフォルダーに画像を入れ、<img src="src\assets\my-image.png"/>として参照するか、
  2. src\app\assetsの当初の意図であったように、src\app\assets\images\my-image.pngをangle.jsonアセットの宣言と参照に追加します。
0
Chris Knight

私は同じ問題を抱えていましたが、これはパス上で大文字と小文字を区別する問題であることが判明しました。

私の場合、アセットの下の画像フォルダは、画像フォルダの大文字Iでした。 /assets/Images/angularconnect-shield.png

画像パスを確認し、完全に一致することを確認してください。

0
Maddy

私も同じ問題を抱えていました。そして私にとっては、assestsディレクトリの前に「/」を追加することでした：

0
Aharon Ohayon