Module not found: error: cannot resolve 'DavidDaDon.png'

Question

I'm not quite sure what I'm doing wrong here. I placed the PNG images in the src folder and used require and relative paths to reference the images. I feel like I'm going crazy. For reference, I'm creating a countdown to celebrating birthdays with close friends and family. The images will eventually become an accordion showing a countdown to their respective birthdays. At the end of the countdown, a text box will appear to speak to them. I also created an Accordian component to contain the working code. Maybe I imported the file twice? I have imported both in accordian file and app.js file.

import Accordian from './accordian';
import AugustusDaGreat from './AugustusDaGreat.png';
import DadMatt from './Dad-Matt.png';
 import DavidDaDon from 'DavidDaDon.png';
 import propic from './propic.png';
 import RickyKyle from './RickyKyle.png';
 
// import 5 pngs of friends
const gus = AugustusDaGreat;
  const dadMatt = DadMatt;
  const daveDaDon = DavidDaDon;
  const profilePic = propic;
  const bigDickRick = RickyKyle;
function App(props) {
  
  return (
  
    <div className="App">
      <h1 className='heading-1'>Never Miss A Birthday!</h1>
      <aside className='aside-1'>Here are the Birthday of some of my Favorite people!</aside>
    <Accordian />
    <span>
     <img src={gus} alt=''/>
    </span>
    <span>
    <img src={dadMatt} alt='dad ' />
    </span>
    <span>
    <img src={daveDaDon} alt=''/>
    </span>
    <span>
    <img src={profilePic} alt=''/>
    </span>
    <span>
    <img src={bigDickRick} alt=''/>
    </span>
    
    </div>
  );
}

I've tried using require in the src attribute and naming the files using const variables.

Answer 1

Can you show us your mistake? What does it say? Also, in the fourth line of the code you pasted, you forgot './'. Please use this instead of

import DavidDaDon from 'DavidDaDon.png';

should look like this

import DavidDaDon from './DavidDaDon.png';