عدم ظهور الصورة في react

هناك فرق بسيط حول كيفية عرض الصور عند استخدام create-react-app فهذه الطريقة ممكنة في html

      <img src="../images/logo.png" alt="logo" />

لكن في react يجب أن تجلب الصورة الى المكون أولا ثم يمكنك استعمالها بهذه الطريقة

import React from 'react';
import logo from '../images/logo.png'

export default function Logo() {
  return (
    <div>
      <img src={logo} alt="logo" />
    </div>
  );
}

كما وضح المدرب صلاح، الطريقة الصحيحة هي إستخدام الـ import statements لجلب الصورة.

لكن، دعني أضيف أيضاً أنه، على الرغم من أن هذه الطريقة هي الطريقة الصحيحة والمحبذة، إلا أنه هناك طريقة أخرى بدون إستعمال import في الملف.
إذا ألقيت نظرة على الـ folders الموجودة بداخل المشروع الذي تعمل عليه، ستجد أنه هناك 2 folders وهما:

• المجلد src: وهذا الذي تضع في داخله كل أكواد React التي تكتبها.
• المجلد public: وهذا يحتوي على ملف أساسي وهو index.html. ذلك الملف هو الذي يقوم React بعمل hosting له على الـ localhost، ويقوم React أيضاً بعمل compile للكود الذي كتبته وضمه في ملف موحد وإدخاله في الـ index.html كـ script عادي.

لهذا، فإنه يمكنك نقل الصور إلى مجلد الـ public وبالتالي يمكنك إستدعائها بكل بساطة.

مثلاً، لو قمت بوضع صورة إسمها user.jpg بداخل الـ public folder، يمكنك إستدعائها من أي مكان بهذا الشكل: