Image doesn’t appear and whole page goes blank

I'm trying to build a React homepage, I already have a header, and I try to import a .png photo, but when i do so with the code below, my header dissapears, the image doesn't show up, and the whole page is blank, what i'm doing wrong?

Homepage component:

import React from 'react';
import {ReactComponent as Arrow} from '../../assets/increase.svg'
import QuestionMark from '../../assets/question2.png'
import './homepage.styles.scss';

const HomePage = () => (
  <div className='homepage'>
      <div className='question-mark-container'>
      <QuestionMark className='question-mark'/>
      </div>
      
  </div>
);

export default HomePage;

Homepage component styles:

.homepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 80px;

    .question-mark-container{
        height: 60%;
        width: 30vw;
        padding: 25px;
    }
}

I don;t think that my router is relevant for this question ,but will post if necessary



Read more here: https://stackoverflow.com/questions/68473723/image-doesnt-appear-and-whole-page-goes-blank

Content Attribution

This content was originally published by MasterWilliams at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: