模块未找到：错误：无法解析 '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';