How can I make images show in a specific React component with create react app?

I’m remaking an old site with react. Everything is going fine so far, but I just made a new component who’s images won’t show. They are visible in the main class, but not in the component class. Also, if I paste the entire component into the main class, the images still won’t show. I have to cut the images out of the component and paste elsewhere for them to show anything.

The faulty component class looks like this…

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>
  )
   }
}

The original site (so you know what it’s supposed to look like) is…
http://matiny.altervista.org/VI/
If you hold down the Q button you’ll see a circle of icons, and that’s what I want to show. Unfortunately, the images are invisible.

You can both use require and import here

Using Require :

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

And then destructure it in image src.or you can do it by using import

Using Import :

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

And Use src= {rock.default} while destructuring it in image src.

Sorry for wasting you guys’ time. I had an opacity: 0 rule that I didn’t notice.