質問編集履歴

5

誤字

2018/09/29 08:23

投稿

abe_789
abe_789

スコア10

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  何故でしょうか。初心者の質問でお手数をおかけします。
8
8
 
9
- ``<img src="./assets/bird.png">``の書き方はangular5ではダメということでしょうか?
9
+ ``<img src="./assets/bird.png">``の書き方はangular5.2.11ではダメということでしょうか?
10
10
 
11
11
 
12
12
 

4

文法修正

2018/09/29 08:23

投稿

abe_789
abe_789

スコア10

test CHANGED
File without changes
test CHANGED
@@ -40,19 +40,19 @@
40
40
 
41
41
  ### 試したこと
42
42
 
43
- 1.「ng new test-app」実行
43
+ 0. 「ng new test-app」実行
44
-
44
+
45
- 2.「assets」フォルダに「bird.png」を格納
45
+ 0. 「assets」フォルダに「bird.png」を格納
46
-
46
+
47
- 3.失敗
47
+ 0. 失敗
48
-
48
+
49
-  「index.html」に``<img src="./assets/bird.png">``を追記
49
+  「index.html」に``<img src="./assets/bird.png">``を追記
50
-
50
+
51
- 4. 成功
51
+ 0. 成功
52
-
52
+
53
- ・「app.component.html」に``<div class="wall"></div>``を追記
53
+ ・「app.component.html」に``<div class="wall"></div>``を追記
54
-
54
+
55
- ・「app.component.css」に
55
+ ・「app.component.css」に
56
56
 
57
57
    ``.wall {
58
58
 
@@ -80,11 +80,11 @@
80
80
 
81
81
   }``を追記
82
82
 
83
- 5 成功
83
+ 0. 成功
84
-
84
+
85
-  ・「app.component.html」に``<img [src]="path">``を追記
85
+ ・「app.component.html」に``<img [src]="path">``を追記
86
-
86
+
87
-  ・「app.component.ts」に
87
+ ・「app.component.ts」に
88
88
 
89
89
    ``export class AppComponent {
90
90
 
@@ -94,7 +94,7 @@
94
94
 
95
95
    }``を記載
96
96
 
97
-  
97
+
98
98
 
99
99
  ### 補足情報(FW/ツールのバージョンなど)
100
100
 

3

試したことを追記

2018/09/29 08:19

投稿

abe_789
abe_789

スコア10

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  何故でしょうか。初心者の質問でお手数をおかけします。
8
8
 
9
+ ``<img src="./assets/bird.png">``の書き方はangular5ではダメということでしょうか?
10
+
9
11
 
10
12
 
11
13
  ### 発生している問題・エラーメッセージ
@@ -38,15 +40,61 @@
38
40
 
39
41
  ### 試したこと
40
42
 
41
-
42
-
43
43
  1.「ng new test-app」実行
44
44
 
45
45
  2.「assets」フォルダに「bird.png」を格納
46
46
 
47
+ 3.失敗
48
+
47
- 3.「index.html」に<img src="./assets/bird.png">を追記
49
+  ・「index.html」に``<img src="./assets/bird.png">``を追記
50
+
48
-
51
+ 4. 成功
52
+
49
-
53
+ ・「app.component.html」に``<div class="wall"></div>``を追記
54
+
55
+ ・「app.component.css」に
56
+
57
+   ``.wall {
58
+
59
+ background-image: url(../assets/bird.png);
60
+
61
+ width: 100%;
62
+
63
+ height: 100%;
64
+
65
+ margin: 0;
66
+
67
+ padding: 0;
68
+
69
+ top: 0;
70
+
71
+ left: 0;
72
+
73
+ position: absolute;
74
+
75
+ background-repeat: no-repeat;
76
+
77
+ background-position: 50% 50%;
78
+
79
+ background-attachment:fixed;
80
+
81
+  }``を追記
82
+
83
+ 5 成功
84
+
85
+  ・「app.component.html」に``<img [src]="path">``を追記
86
+
87
+  ・「app.component.ts」に
88
+
89
+   ``export class AppComponent {
90
+
91
+    title = 'app';
92
+
93
+    path = require('assets/bird.png');
94
+
95
+   }``を記載
96
+
97
+  
50
98
 
51
99
  ### 補足情報(FW/ツールのバージョンなど)
52
100
 
@@ -54,6 +102,8 @@
54
102
 
55
103
  画像の絶対パス:「test-app\src\assets\bird.png」
56
104
 
105
+ ![イメージ説明](ccd6f0d60fede2619beb8cb58607bf9c.png)
106
+
57
107
  AngularCLI:1.7.4
58
108
 
59
109
  ``{

2

OS、画像の絶対パスを追記

2018/09/29 08:15

投稿

abe_789
abe_789

スコア10

test CHANGED
File without changes
test CHANGED
@@ -50,11 +50,13 @@
50
50
 
51
51
  ### 補足情報(FW/ツールのバージョンなど)
52
52
 
53
- Angular CLIのバージョンは 1.7.4です。
53
+ OS:windows10
54
54
 
55
- ``
55
+ 画像の絶対パス:「test-app\src\assets\bird.png」
56
56
 
57
+ AngularCLI:1.7.4
58
+
57
- {
59
+ ``{
58
60
 
59
61
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
60
62
 
@@ -172,6 +174,4 @@
172
174
 
173
175
  }
174
176
 
175
- }
176
-
177
- ``
177
+ }``

1

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

2018/09/28 11:26

投稿

abe_789
abe_789

スコア10

test CHANGED
File without changes
test CHANGED
@@ -50,6 +50,128 @@
50
50
 
51
51
  ### 補足情報(FW/ツールのバージョンなど)
52
52
 
53
+ Angular CLIのバージョンは 1.7.4です。
53
54
 
55
+ ``
54
56
 
57
+ {
58
+
59
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
60
+
61
+ "project": {
62
+
63
+ "name": "test-app"
64
+
65
+ },
66
+
67
+ "apps": [
68
+
69
+ {
70
+
71
+ "root": "src",
72
+
73
+ "outDir": "dist",
74
+
75
+ "assets": [
76
+
77
+ "assets",
78
+
79
+ "favicon.ico"
80
+
81
+ ],
82
+
83
+ "index": "index.html",
84
+
85
+ "main": "main.ts",
86
+
87
+ "polyfills": "polyfills.ts",
88
+
89
+ "test": "test.ts",
90
+
91
+ "tsconfig": "tsconfig.app.json",
92
+
93
+ "testTsconfig": "tsconfig.spec.json",
94
+
95
+ "prefix": "app",
96
+
97
+ "styles": [
98
+
99
+ "styles.css"
100
+
101
+ ],
102
+
103
+ "scripts": [],
104
+
105
+ "environmentSource": "environments/environment.ts",
106
+
107
+ "environments": {
108
+
109
+ "dev": "environments/environment.ts",
110
+
111
+ "prod": "environments/environment.prod.ts"
112
+
113
+ }
114
+
115
+ }
116
+
117
+ ],
118
+
119
+ "e2e": {
120
+
121
+ "protractor": {
122
+
123
+ "config": "./protractor.conf.js"
124
+
125
+ }
126
+
127
+ },
128
+
129
+ "lint": [
130
+
131
+ {
132
+
133
+ "project": "src/tsconfig.app.json",
134
+
135
+ "exclude": "**/node_modules/**"
136
+
137
+ },
138
+
139
+ {
140
+
141
+ "project": "src/tsconfig.spec.json",
142
+
143
+ "exclude": "**/node_modules/**"
144
+
145
+ },
146
+
147
+ {
148
+
149
+ "project": "e2e/tsconfig.e2e.json",
150
+
151
+ "exclude": "**/node_modules/**"
152
+
153
+ }
154
+
155
+ ],
156
+
157
+ "test": {
158
+
55
- ここにより詳細な情報を記載してください。
159
+ "karma": {
160
+
161
+ "config": "./karma.conf.js"
162
+
163
+ }
164
+
165
+ },
166
+
167
+ "defaults": {
168
+
169
+ "styleExt": "css",
170
+
171
+ "component": {}
172
+
173
+ }
174
+
175
+ }
176
+
177
+ ``