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

Rayden Storm · 4 مارس 2021

انا احاول عرض صورة وتأكدت أنها في مجلد images باسم logo.png والطريق للوصول للصورة صحيح لكنها لم تظهر

import React from 'react'

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

إسلام عبدالعزيز · 4 مارس 2021

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

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

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

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

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

تم التعديل في 4 مارس 2021 بواسطة إسلام عبدالعزيز
تعديل الصورة المرفقه

Salah Eddin Beriani2 · 4 مارس 2021

هناك فرق بسيط حول كيفية عرض الصور عند استخدام 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>
  );
}