hugo

src/Home.js

@@ -1,15 +1,14 @@
 import React, {Component} from "react";
 import ModelImage from "./Plane";
-import f22 from './img/f22.png'
 
 class Home extends Component {
     render() {
         return (
             <div>
                 <h1>Hugos Favoriten</h1>
-                <ModelImage img={f22} name="F-22 Raptor"/>
+                <ModelImage src="f22.png" name="F-22 Raptor"/>
             </div>
-        )
+        );
     }
 }
 

src/Militaer.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import ModelImage from './Plane'
-import f22 from './img/f22.png'
+
-import harrier from './img/harrier.jpg'
 
 class Modern extends React.Component {
     render() {
         const items = Array(100).fill(1).map((x, y) => x + y)
-            .map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
+            .map(x => <ModelImage src="f22.png" name={'F' + (20 + x) + ' Raptor'}/>);
 
         return (
             <div>
                 {items}
-                <ModelImage img={harrier} name="AV-8B Harrier"/>
+                <ModelImage src="harrier.jpg" name="AV-8B Harrier"/>
             </div>
         )
     }

src/Plane.css

@@ -1,3 +1,7 @@
+:root {
+    --model-image-height: 200px;
+}
+
 .model {
     position: relative;
     text-align: center;
@@ -26,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    line-height: 200px;
+    line-height: var(--model-image-height);
 }
 
 .model:hover .model-info {
@@ -35,7 +39,7 @@
 }
 
 .model img {
-    height: 200px;
+    height: var(--model-image-height);
 }
 
 

src/Plane.js

@@ -6,20 +6,19 @@ class ModelImage extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            img: '',
             name: '',
+            src: '',
         }
     }
 
     static getDerivedStateFromProps(props) {
-        return {img: props.img, name: props.name};
+        return {name: props.name, src: props.src};
     }
 
     render() {
-        //const style = {backgroundImage: `url('/img/${this.state.img}')`};
         return (
             <a href="" className="model">
-                <img src={this.state.img} alt={this.state.name}/>
+                <img src={process.env.PUBLIC_URL + '/img/' + this.state.src} alt={this.state.name}/>
                 <div className="model-info">
                     <span className="model-info-text">{this.state.name}</span>
                 </div>