angular5で画像表示

Question

画像を表示したいです。

angular5で画像表示をしたいのですができません。
何故でしょうか。初心者の質問でお手数をおかけします。
<img src="./assets/bird.png">の書き方はangular5.2.11ではダメということでしょうか？

発生している問題・エラーメッセージ

Request URL: http://localhost:4200/assets/bird.png
Request Method: GET
Status Code: 404 Not Found

該当のソースコード

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

試したこと

1. 「ng new test-app」実行
2. 「assets」フォルダに「bird.png」を格納
3. 失敗

　「index.html」に<img src="./assets/bird.png">を追記
0. 成功
・「app.component.html」に<div class="wall"></div>を追記
・「app.component.css」に
.wall { background-image: url(../assets/bird.png); width: 100%; height: 100%; margin: 0; padding: 0; top: 0; left: 0; position: absolute; background-repeat: no-repeat; background-position: 50% 50%; background-attachment:fixed; 　}を追記
0. 成功
・「app.component.html」に<img [src]="path">を追記
・「app.component.ts」に
export class AppComponent { 　　　title = 'app'; 　　　path = require('assets/bird.png'); 　　}を記載

補足情報（FW/ツールのバージョンなど）

OS：windows10
画像の絶対パス：「test-app\src\assets\bird.png」

AngularCLI：1.7.4
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "test-app" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, { "project": "src/tsconfig.spec.json", "exclude": "**/node_modules/**" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "**/node_modules/**" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }

Comments

[xenbeat]

Angular CLIのバージョンと.angular-cli.jsonまたはangular.jsonの内容を追記ください。

[abe_789]

Angular CLIのバージョンと.angular-cli.jsonまたはangular.jsonの内容を追記しました。

[xenbeat]

念の為、OSおよび、画像の絶対パスも記載していただけますか。

Answer 1

404なら画像ファイルが本当に存在しないのではないかと思いますよ。

作業ディレクトリ(test-app)\src\assets にbird.pngがあるか確認してください。

---

追記

> ng "-v"


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.4
Node: 8.11.3
OS: win32 x64
Angular: 6.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.4
@angular-devkit/build-angular     0.7.4
@angular-devkit/build-optimizer   0.7.4
@angular-devkit/build-webpack     0.7.4
@angular-devkit/core              0.7.4
@angular-devkit/schematics        0.7.4
@angular/cdk                      6.4.5
@angular/cli                      6.1.4
@angular/material                 6.4.5
@ngtools/webpack                  6.1.4
@schematics/angular               0.7.4
@schematics/update                0.7.4
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2


-------------------
angular.json 抜粋

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/houge,
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",  ← srcがある。
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },

Comments

[abe_789]

あることを確認しました。

[mosapride]

私のangular.jsonにはsrcがあります。
"assets": [
"src/favicon.ico",
"src/assets"
],

[abe_789]

src（src/assets）をつけてもダメでした。

Answer 2

フォルダの保存場所を変えたらうまくいきました。
日本語パスがダメでした。
前：\学習\angular\0)src
後：C:\angular

Answer 3

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

上のように先頭のドットを削除するとどうでしょうか。
本件はもう解決済みかもしれませんが、私も同じ問題になりました。
下記URLを見て解決しました。なぜ解決するのかまではわかりません。

http://www.l08084.com/entry/2018/03/10/172129
https://stackoverflow.com/questions/40747680/using-angular-cli-and-unable-to-use-relative-image-paths-in-css-files

Comments

[abe_789]

ダメでした。

Answer 4

<img src="assets/bird.png">はどうですか？

ng serveはもちろん、もしGithubPagesにあげる時でもこれでいけるかなと

Comments

[abe_789]

「<img src="assets/bird.png">」をindex.htmlに記載したのですが、ダメでしたが、
下記の方法だと表示しました。また、デベロッパーツールのNetworkで確認したところファイル名が変わっていました。「http://localhost:4200/bird.5ed1647baf812f88c29b.png」
　index.html
　　「<div class="wall"></div>」を追記
　styles.css
　　「 .wall {
　　　 background-image: url(assets/bird.png);
　　　width: 100%;
　　　height: 100%;
　　　position: absolute;
　　}」

[user14]

すみません。よく見ていませんでした。
index.htmlに書いているのですね。
てっきりどこかの.component.htmlかと思っていました。
僕の回答は忘れてください。

[abe_789]

app.component.htmlに「<img src="assets/bird.png">」記載したのですが、ダメでしたが、
「<div class="wall"></div>」を記載したら表示しました。
CSSの「background-image: url(../assets/bird.png)」でしか表示することしかできないのでしょうか。

[user14]

いえ、imgタグでもできましたよ
Angular Cli 6.2.3

僕のAngular.jsonも
"assets": [
"src/favicon.ico",
"src/assets"
],
なのでそこかもしれませんね。
僕もAngular初心者なのでわかりません…