模組找不到：錯誤：無法解析 'DavidDaDon.png'

Question

我不太確定我在這裡做錯了什麼。我將 PNG 圖片放在了 src 資料夾中，並使用了 require 和相對路徑來引用這些圖片。我覺得自己快要瘋了。作為參考，我正在製作一個與親密的朋友和家人一起慶祝生日的倒數計時。這些圖片最終將成為一個手風琴，顯示各自的生日倒數計時。在倒數結束時，將出現一個文字方塊來與他們通話。我還創建了一個 Accordian 元件來包含工作代碼。也許我重複導入了文件？我在 accordian 檔案和 app.js 檔案中都進行了導入。

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

我已經嘗試在 src 屬性中使用 require，並使用 const 變數命名了這些檔案。

Answer 1

你能讓我們看看你的錯誤嗎？它說了什麼？此外，在您貼上的程式碼的第四行中，您忘記了'./'。請使用它來代替

import DavidDaDon from 'DavidDaDon.png';

應該要這樣

import DavidDaDon from './DavidDaDon.png';