回答編集履歴
12
a
answer
CHANGED
|
@@ -40,4 +40,22 @@
|
|
|
40
40
|
import logo from '../image/logo.png';
|
|
41
41
|
console.log(logo);
|
|
42
42
|
```
|
|
43
|
-
のように読み込んだ画像リソースを`console.log()`で確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
|
43
|
+
のように読み込んだ画像リソースを`console.log()`で確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
import './App.css';
|
|
47
|
+
|
|
48
|
+
class App extends Component {
|
|
49
|
+
render() {
|
|
50
|
+
return (
|
|
51
|
+
<div className="App">
|
|
52
|
+
<img className={ 'image' } />
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
また、上記のようにクラス名を当てて背景画像を読み込んでいる場合も、画像のパスは以下のようにビルド後に生成される画像パスになっていることを確認できるかと思います。
|
|
60
|
+
|
|
61
|
+
|
11
a
answer
CHANGED
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
import logo from '../image/logo.png';
|
|
41
41
|
console.log(logo);
|
|
42
42
|
```
|
|
43
|
-
のように読み込んだ画像リソースを確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
|
43
|
+
のように読み込んだ画像リソースを`console.log()`で確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
10
a
answer
CHANGED
|
@@ -32,4 +32,12 @@
|
|
|
32
32
|
> logo.png
|
|
33
33
|
```
|
|
34
34
|
ファイル名は質問文のコードに記載されているものと変わってますのでご注意ください。
|
|
35
|
-
上記ディレクトリ構成で動作確認は取れました。
|
|
35
|
+
上記ディレクトリ構成で動作確認は取れました。
|
|
36
|
+
|
|
37
|
+
# 追記
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
import logo from '../image/logo.png';
|
|
41
|
+
console.log(logo);
|
|
42
|
+
```
|
|
43
|
+
のように読み込んだ画像リソースを確認すると、`/static/media/logo.638be909.png`のような`build`後に生成される画像のパスと一致していることを確認できると思います。
|
9
a
answer
CHANGED
|
@@ -21,4 +21,15 @@
|
|
|
21
21
|
export default App;
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
こんな感じでいけると思います。
|
|
24
|
+
こんな感じでいけると思います。
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
src
|
|
29
|
+
> contents
|
|
30
|
+
> App.js
|
|
31
|
+
> image
|
|
32
|
+
> logo.png
|
|
33
|
+
```
|
|
34
|
+
ファイル名は質問文のコードに記載されているものと変わってますのでご注意ください。
|
|
35
|
+
上記ディレクトリ構成で動作確認は取れました。
|
8
a
answer
CHANGED
|
@@ -5,13 +5,7 @@
|
|
|
5
5
|
const style = {
|
|
6
6
|
width: '100%',
|
|
7
7
|
height: '11rem',
|
|
8
|
-
backgroundPosition: 'top center',
|
|
9
|
-
backgroundSize: 'cover',
|
|
10
|
-
backgroundImage: `url(${logo})`
|
|
8
|
+
backgroundImage: `url(${logo})`
|
|
11
|
-
backgroundRepeat: 'no-repeat',
|
|
12
|
-
borderRadius: 'inherit',
|
|
13
|
-
borderBottomLeftRadius: '0',
|
|
14
|
-
borderBottomRightRadius: '0',
|
|
15
9
|
};
|
|
16
10
|
|
|
17
11
|
class App extends Component {
|
7
a
answer
CHANGED
|
@@ -1,13 +1,30 @@
|
|
|
1
|
+
```
|
|
1
|
-
|
|
2
|
+
import React, { Component } from 'react';
|
|
3
|
+
import logo from '../image/logo.png';
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
const style = {
|
|
6
|
+
width: '100%',
|
|
7
|
+
height: '11rem',
|
|
8
|
+
backgroundPosition: 'top center',
|
|
9
|
+
backgroundSize: 'cover',
|
|
10
|
+
backgroundImage: `url(${logo})`,
|
|
11
|
+
backgroundRepeat: 'no-repeat',
|
|
12
|
+
borderRadius: 'inherit',
|
|
13
|
+
borderBottomLeftRadius: '0',
|
|
14
|
+
borderBottomRightRadius: '0',
|
|
15
|
+
};
|
|
4
16
|
|
|
17
|
+
class App extends Component {
|
|
18
|
+
render() {
|
|
19
|
+
return (
|
|
5
|
-
|
|
20
|
+
<div className="App">
|
|
21
|
+
<img style={ style } />
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
6
26
|
|
|
7
|
-
|
|
27
|
+
export default App;
|
|
28
|
+
```
|
|
8
29
|
|
|
9
|
-
こ
|
|
10
|
-
[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)
|
|
11
|
-
|
|
12
|
-
# 追記
|
|
13
|
-
すみません。読み間違えていたようです。後ほどPCからアクセスできる時に動作確認してみます。
|
|
30
|
+
こんな感じでいけると思います。
|
6
a
answer
CHANGED
|
@@ -7,4 +7,7 @@
|
|
|
7
7
|
※携帯からなので読み違えの回答だったらすみません。
|
|
8
8
|
|
|
9
9
|
これとか参考になるかもしれません。
|
|
10
|
-
[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)
|
|
10
|
+
[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)
|
|
11
|
+
|
|
12
|
+
# 追記
|
|
13
|
+
すみません。読み間違えていたようです。後ほどPCからアクセスできる時に動作確認してみます。
|
5
https://stackoverflow.com/questions/47950833/react-why-is-double-brace-syntax-style-required-for-inl
answer
CHANGED
|
@@ -4,4 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
「react style double curly braces」みたいなキーワードでググってみてください。
|
|
6
6
|
|
|
7
|
-
※携帯からなので読み違えの回答だったらすみません。
|
|
7
|
+
※携帯からなので読み違えの回答だったらすみません。
|
|
8
|
+
|
|
9
|
+
これとか参考になるかもしれません。
|
|
10
|
+
[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
あ
answer
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
二重カッコでいけませんか？
|
|
4
4
|
|
|
5
|
-
「react style double curly
|
|
5
|
+
「react style double curly braces」みたいなキーワードでググってみてください。
|
|
6
6
|
|
|
7
7
|
※携帯からなので読み違えの回答だったらすみません。
|
3
a
answer
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
二重カッコでいけませんか？
|
|
4
4
|
|
|
5
|
-
「react style double
|
|
5
|
+
「react style double curly brackets」みたいなキーワードでググってみてください。
|
|
6
6
|
|
|
7
7
|
※携帯からなので読み違えの回答だったらすみません。
|
2
あ
answer
CHANGED
|
@@ -2,4 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
二重カッコでいけませんか？
|
|
4
4
|
|
|
5
|
-
「react style double bracket」みたいなキーワードでググってみてください。
|
|
5
|
+
「react style double bracket」みたいなキーワードでググってみてください。
|
|
6
|
+
|
|
7
|
+
※携帯からなので読み違えの回答だったらすみません。
|
1
あ
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
<div style={{ backImage }}></div>
|
|
2
2
|
|
|
3
|
-
二重カッコでいけませんか？
|
|
3
|
+
二重カッコでいけませんか？
|
|
4
|
+
|
|
5
|
+
「react style double bracket」みたいなキーワードでググってみてください。
|