質問編集履歴
5
誤字
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
文法修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -40,19 +40,19 @@
|
|
40
40
|
|
41
41
|
### 試したこと
|
42
42
|
|
43
|
-
|
43
|
+
0. 「ng new test-app」実行
|
44
|
-
|
44
|
+
|
45
|
-
|
45
|
+
0. 「assets」フォルダに「bird.png」を格納
|
46
|
-
|
46
|
+
|
47
|
-
|
47
|
+
0. 失敗
|
48
|
-
|
48
|
+
|
49
|
-
|
49
|
+
「index.html」に``<img src="./assets/bird.png">``を追記
|
50
|
-
|
50
|
+
|
51
|
-
|
51
|
+
0. 成功
|
52
|
-
|
52
|
+
|
53
|
-
|
53
|
+
・「app.component.html」に``<div class="wall"></div>``を追記
|
54
|
-
|
54
|
+
|
55
|
-
|
55
|
+
・「app.component.css」に
|
56
56
|
|
57
57
|
``.wall {
|
58
58
|
|
@@ -80,11 +80,11 @@
|
|
80
80
|
|
81
81
|
}``を追記
|
82
82
|
|
83
|
-
|
83
|
+
0. 成功
|
84
|
-
|
84
|
+
|
85
|
-
|
85
|
+
・「app.component.html」に``<img [src]="path">``を追記
|
86
|
-
|
86
|
+
|
87
|
-
|
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
試したことを追記
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
|
-
|
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、画像の絶対パスを追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -50,11 +50,13 @@
|
|
50
50
|
|
51
51
|
### 補足情報(FW/ツールのバージョンなど)
|
52
52
|
|
53
|
-
|
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の内容を追記しました。
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
|
+
``
|