回答編集履歴
12
a
test
CHANGED
|
@@ -83,3 +83,39 @@
|
|
|
83
83
|
```
|
|
84
84
|
|
|
85
85
|
のように読み込んだ画像リソースを`console.log()`で確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
import './App.css';
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
class App extends Component {
|
|
96
|
+
|
|
97
|
+
render() {
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
|
|
101
|
+
<div className="App">
|
|
102
|
+
|
|
103
|
+
<img className={ 'image' } />
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
);
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
また、上記のようにクラス名を当てて背景画像を読み込んでいる場合も、画像のパスは以下のようにビルド後に生成される画像パスになっていることを確認できるかと思います。
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
11
a
test
CHANGED
|
@@ -82,4 +82,4 @@
|
|
|
82
82
|
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
のように読み込んだ画像リソースを確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
|
85
|
+
のように読み込んだ画像リソースを`console.log()`で確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
10
a
test
CHANGED
|
@@ -67,3 +67,19 @@
|
|
|
67
67
|
ファイル名は質問文のコードに記載されているものと変わってますのでご注意ください。
|
|
68
68
|
|
|
69
69
|
上記ディレクトリ構成で動作確認は取れました。
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
# 追記
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
import logo from '../image/logo.png';
|
|
80
|
+
|
|
81
|
+
console.log(logo);
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
のように読み込んだ画像リソースを確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
9
a
test
CHANGED
|
@@ -45,3 +45,25 @@
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
こんな感じでいけると思います。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
src
|
|
56
|
+
|
|
57
|
+
> contents
|
|
58
|
+
|
|
59
|
+
> App.js
|
|
60
|
+
|
|
61
|
+
> image
|
|
62
|
+
|
|
63
|
+
> logo.png
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
ファイル名は質問文のコードに記載されているものと変わってますのでご注意ください。
|
|
68
|
+
|
|
69
|
+
上記ディレクトリ構成で動作確認は取れました。
|
8
a
test
CHANGED
|
@@ -12,19 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
height: '11rem',
|
|
14
14
|
|
|
15
|
-
backgroundPosition: 'top center',
|
|
16
|
-
|
|
17
|
-
backgroundSize: 'cover',
|
|
18
|
-
|
|
19
|
-
backgroundImage: `url(${logo})`
|
|
15
|
+
backgroundImage: `url(${logo})`
|
|
20
|
-
|
|
21
|
-
backgroundRepeat: 'no-repeat',
|
|
22
|
-
|
|
23
|
-
borderRadius: 'inherit',
|
|
24
|
-
|
|
25
|
-
borderBottomLeftRadius: '0',
|
|
26
|
-
|
|
27
|
-
borderBottomRightRadius: '0',
|
|
28
16
|
|
|
29
17
|
};
|
|
30
18
|
|
7
a
test
CHANGED
|
@@ -1,25 +1,59 @@
|
|
|
1
|
+
```
|
|
2
|
+
|
|
1
|
-
|
|
3
|
+
import React, { Component } from 'react';
|
|
4
|
+
|
|
5
|
+
import logo from '../image/logo.png';
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
const style = {
|
|
10
|
+
|
|
11
|
+
width: '100%',
|
|
12
|
+
|
|
13
|
+
height: '11rem',
|
|
14
|
+
|
|
15
|
+
backgroundPosition: 'top center',
|
|
16
|
+
|
|
17
|
+
backgroundSize: 'cover',
|
|
18
|
+
|
|
19
|
+
backgroundImage: `url(${logo})`,
|
|
20
|
+
|
|
21
|
+
backgroundRepeat: 'no-repeat',
|
|
22
|
+
|
|
23
|
+
borderRadius: 'inherit',
|
|
24
|
+
|
|
25
|
+
borderBottomLeftRadius: '0',
|
|
26
|
+
|
|
27
|
+
borderBottomRightRadius: '0',
|
|
28
|
+
|
|
29
|
+
};
|
|
6
30
|
|
|
7
31
|
|
|
8
32
|
|
|
33
|
+
class App extends Component {
|
|
34
|
+
|
|
35
|
+
render() {
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
|
|
9
|
-
|
|
39
|
+
<div className="App">
|
|
40
|
+
|
|
41
|
+
<img style={ style } />
|
|
42
|
+
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
}
|
|
10
50
|
|
|
11
51
|
|
|
12
52
|
|
|
13
|
-
|
|
53
|
+
export default App;
|
|
54
|
+
|
|
55
|
+
```
|
|
14
56
|
|
|
15
57
|
|
|
16
58
|
|
|
17
|
-
こ
|
|
18
|
-
|
|
19
|
-
[https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles](https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles)
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
# 追記
|
|
24
|
-
|
|
25
|
-
すみません。読み間違えていたようです。後ほどPCからアクセスできる時に動作確認してみます。
|
|
59
|
+
こんな感じでいけると思います。
|
6
a
test
CHANGED
|
@@ -17,3 +17,9 @@
|
|
|
17
17
|
これとか参考になるかもしれません。
|
|
18
18
|
|
|
19
19
|
[https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles](https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
# 追記
|
|
24
|
+
|
|
25
|
+
すみません。読み間違えていたようです。後ほどPCからアクセスできる時に動作確認してみます。
|
5
https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inl
test
CHANGED
|
@@ -11,3 +11,9 @@
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
※携帯からなので読み違えの回答だったらすみません。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
これとか参考になるかもしれません。
|
|
18
|
+
|
|
19
|
+
[https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles](https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inline-styles)
|
4
あ
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
「react style double curly brac
|
|
9
|
+
「react style double curly braces」みたいなキーワードでググってみてください。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
3
a
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
「react style double bracket」みたいなキーワードでググってみてください。
|
|
9
|
+
「react style double curly brackets」みたいなキーワードでググってみてください。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
2
あ
test
CHANGED
|
@@ -7,3 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
「react style double bracket」みたいなキーワードでググってみてください。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
※携帯からなので読み違えの回答だったらすみません。
|
1
あ
test
CHANGED
|
@@ -3,3 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
二重カッコでいけませんか？
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
「react style double bracket」みたいなキーワードでググってみてください。
|