مشكلة في عرض صورة بداخل مكون React

في react لا نقوم بكتابة مسار الصورة كما في HTML فلا تنسى أننا نكتب كود بداخل ملف بصيغة JSX، وليس html. بالتالي يجب استيراد الصورة أولاً بالملف App.jsx:

import bg from './bg.jpg'

ثم استخدامها كالتالي:

  <img src={bg} alt="" />

لاحظ كما تعلمنا في React لا يتم وضع مسار الصورة مباشرة هكذا حيث هذا الأمر مقتصر على HTML والذي يقوم بإرسال طلب لإحضار الصورة ولكن في React نقوم بإستيرادها كملف .

لهذا في ملف App.jsx يجب أن يكون كالتالي :

import './App.css'
import bg from './bg.jpg'

function App() {
  return (
    <div>
      <div className="navbar">
        <h1>ZN99</h1>
        <nav>
          <a href="">Home</a>
          <a href="">About</a>
          <a href="">Project</a>
          <a href="">Contact</a>
        </nav>
      </div>
      <div className="hero">
        <div className="image">
          <img src={bg} alt="" />
        </div>
      </div>
    </div>
  )


}

export default App;