質問編集履歴
2
「src配下にimageフォルダ」-> 「src配下にimgフォルダ」
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
|
|
117
117
|
### 試したこと
|
|
118
118
|
|
|
119
|
-
src配下にim
|
|
119
|
+
src配下にimgフォルダを作成し、そこから画像を一つずつimportしています。
|
|
120
120
|
|
|
121
121
|
|
|
122
122
|
|
1
Animal.jsを追記・省略していた基本コード（import React from 'react' 等）を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,55 +18,97 @@
|
|
|
18
18
|
|
|
19
19
|
【App.js】
|
|
20
20
|
|
|
21
|
+
import React from 'react';
|
|
22
|
+
|
|
23
|
+
import Animal from './Animal';
|
|
24
|
+
|
|
25
|
+
import cat from '../img/cat.jpg';
|
|
26
|
+
|
|
27
|
+
import sheep from '../img/sheep.jpg';
|
|
21
28
|
|
|
22
29
|
|
|
23
|
-
省略
|
|
24
30
|
|
|
25
|
-
|
|
31
|
+
class App extends React.Component {
|
|
26
32
|
|
|
27
|
-
|
|
33
|
+
render(){
|
|
28
34
|
|
|
29
|
-
|
|
35
|
+
render(){
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
const animalPhotos = [
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
{
|
|
34
40
|
|
|
35
|
-
{
|
|
41
|
+
image: {cat}
|
|
36
42
|
|
|
37
|
-
|
|
43
|
+
},
|
|
38
44
|
|
|
39
|
-
|
|
45
|
+
{
|
|
40
46
|
|
|
41
|
-
{
|
|
47
|
+
image: {sheep}
|
|
42
48
|
|
|
43
|
-
|
|
49
|
+
}
|
|
44
50
|
|
|
45
|
-
|
|
51
|
+
];
|
|
46
52
|
|
|
47
|
-
]
|
|
48
53
|
|
|
49
|
-
return(
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
return(
|
|
52
56
|
|
|
53
|
-
|
|
57
|
+
<div>
|
|
54
58
|
|
|
55
|
-
|
|
59
|
+
{animalPhotos.map((animalItem)=> {
|
|
56
60
|
|
|
57
|
-
|
|
61
|
+
return(
|
|
58
62
|
|
|
59
|
-
|
|
63
|
+
<Animal
|
|
60
64
|
|
|
61
|
-
|
|
65
|
+
image = {animalItem.image}
|
|
62
66
|
|
|
63
|
-
|
|
67
|
+
/>
|
|
64
68
|
|
|
69
|
+
)
|
|
70
|
+
|
|
71
|
+
})}
|
|
72
|
+
|
|
65
|
-
);
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
}
|
|
66
76
|
|
|
67
77
|
}
|
|
68
78
|
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
export default App;
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
【Animal.js】
|
|
86
|
+
|
|
87
|
+
import React from 'react';
|
|
88
|
+
|
|
89
|
+
class Animal extends React.Component{
|
|
90
|
+
|
|
91
|
+
render(){
|
|
92
|
+
|
|
93
|
+
return(
|
|
94
|
+
|
|
95
|
+
<div>
|
|
96
|
+
|
|
97
|
+
<img src={this.props.image}/>
|
|
98
|
+
|
|
99
|
+
</div>
|
|
100
|
+
|
|
69
|
-
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
export default Animal;
|
|
110
|
+
|
|
111
|
+
|
|
70
112
|
|
|
71
113
|
```
|
|
72
114
|
|