Wie kann ich Bilder mit der create react App in einer bestimmten React-Komponente anzeigen lassen?

Question

Ich mache eine alte Seite mit reagieren. Bis jetzt läuft alles gut, aber ich habe gerade eine neue Komponente erstellt, deren Bilder nicht angezeigt werden. Sie sind in der Hauptklasse sichtbar, aber nicht in der Komponentenklasse. Wenn ich die gesamte Komponente in die Hauptklasse einfüge, werden die Bilder weiterhin nicht angezeigt. Ich muss die Bilder aus der Komponente herausschneiden und an anderer Stelle einfügen, damit sie etwas zeigen können.

Die fehlerhafte Komponentenklasse wie folgt aussieht ...

import React from 'react'; 
import rock from '../images/pngs/rock.png'; 
import none from '../images/pngs/none.png'; 
import blue from '../images/pngs/blue.png'; 
import flash from '../images/pngs/flash.png'; 
import estim from '../images/pngs/estim.png'; 
import urban from '../images/pngs/urban.png'; 
import intl from '../images/pngs/intl.png'; 

export default class Radio extends React.Component { 

render() { 
     return (
     <section className="radio"> 

     <div className="septagon"> 
      <div className="labels"> 
      <p> 
       <em></em> 
      </p> 
      <p>Radio</p> 
      <p>Off</p> 
     </div> 
     <span className="deg40"><img src={rock} alt="" /></span> 
     <span className="deg90"><img src={none} alt="" /></span> 
     <span className="deg140"><img src={blue} alt="" /></span> 
     <span className="deg195"><img src={flash} alt="" /></span> 
     <span className="deg245"><img src={estim} alt="" /></span> 
     <span className="deg295"><img src={urban} alt="" /></span> 
     <span className="deg345"><img src={intl} alt="" /></span> 
     <audio id="playmusic" preload="none"><source type="audio/mpeg" /></audio> 
    </div> 
    </section> 
) 
    } 
} 

Der ursprüngliche Standort (so dass Sie wissen, was es aussehen soll) ist ... http://matiny.altervista.org/VI/ Wenn Sie die Q-Taste gedrückt halten Sie Ich sehe einen Kreis von Symbolen, und das möchte ich zeigen. Leider sind die Bilder nicht sichtbar.

Answer 1

können Sie verwenden beide erfordern und Import hier

Erfordern Verwendung:

const rock = require('../images/pngs/rock.png'); 

Und dann ist es in Bild destrukturiert src.or Sie es tun können durch Import mit

Verwendung Import:

import * as rock from '../images/pngs/rock.png'; 

Und Verwenden Sie src= {rock.default} beim Destrukturieren in Image Src.

Answer 2

Entschuldigung für die Verschwendung von euch Zeit. Ich hatte eine Opazität: 0 Regel, die ich nicht bemerkt habe.