عند وضع رابط الصورة في الخاصية background-image لا تظهر الصورة (مشروع React)

Mohamed Boumlik · 19 أبريل 2023

السلام عليكم

في مشروعي الخاص

لدي ملف webpack يعمل جيدا بحيث اعمل ب react

في components يعمل الباث بسلاسة

import React from 'react';
import "../styles/profile.css";

function Profile(props) {
  

  return (
      <>
      <h2>profile</h2>
      <div className="square">
          {/* <img src="/img/img1.jpg" alt="" /> */}
      </div>
      </>
  );
}

export default Profile;

الا ان في css لايعمل

.square{
    height: 100%;
    width: 100%;
    border: 3px solid black;
    background-image: url("/img/img1.jpg");
}

علما ان الترتيب للمجلات هو كالتالي

portfilio

1-public

1-1 img

2-src

2-1 components

2-1-1 profile.jsx

2-2 styles

2portfilio.rar-2-1 profile.css

محمد Fahmy · 19 أبريل 2023

المشكلة في مسار ملف profile.css فهو ليس موجود في مجلد styles بل موجود في مجلد components (نفس المجلد الذي يوجد فيه هذا المكون).

لذلك قم بنقل profile.css إلي مجلد style.

هذه الصورة ما يجب أن يكون.

ولكي تعمل معك الصورة الموجودة في ملف profile.css, يجب عليك نقل مجلد img إلي داخل مجلد src.

ويجب أن يكون مسار الصورة هكذا.

background-image: url("../img/img1.jpg");

وهذه ملفات المشروع بعد كل التعديلات.

portfilio.rar

Mohamed Boumlik · 19 أبريل 2023

بتاريخ 22 دقائق مضت قال Mohammed Fahmy3:
المشكلة في مسار ملف profile.css فهو ليس موجود في مجلد styles بل موجود في مجلد components (نفس المجلد الذي يوجد فيه هذا المكون).

لذلك قم بنقل profile.css إلي مجلد style.

هذه الصورة ما يجب أن يكون.

ولكي تعمل معك الصورة الموجودة في ملف profile.css, يجب عليك نقل مجلد img إلي داخل مجلد src.

ويجب أن يكون مسار الصورة هكذا.
background-image: url("../img/img1.jpg");
وهذه ملفات المشروع بعد كل التعديلات.

portfilio.rar 992.9 kB · 0 تنزيلات

لقد عملت

شكرا

لكن لدي سؤال بسيط

هو لم عند نقل المجلد img to src و اردت ان اضع الصورة بهده الطريقة

<>
      <h2>profile</h2>
      <div className="square">
          <img src="../img/img1.jpg" alt="" />
      </div>
      </>

لا تعمل

يعني هل هناك طريقة ما لكي يعمل رابط الصورة سواء ب profile.css or profile.jsx

محمد Fahmy · 19 أبريل 2023

بتاريخ 1 دقيقة مضت قال Mohamed Boumlik:
لقد عملت

شكرا

لكن لدي سؤال بسيط

هو لم عند نقل المجلد img to src و اردت ان اضع الصورة بهده الطريقة
<>
      <h2>profile</h2>
      <div className="square">
          <img src="../img/img1.jpg" alt="" />
      </div>
      </>
لا تعمل

يعني هل هناك طريقة ما لكي يعمل رابط الصورة سواء ب profile.css or profile.jsx

نعم, هناك طريقة وهي من خلال استدعاء الصورة من خلال import و from هكذا.

import React from 'react';
import "../styles/profile.css"
import img from "../img/img1.jpg"

function Profile(props) {

  return (

      <>
    
      <h2>profile</h2>

      <div className="square">

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

      </div>

      </>

  );

}



export default Profile;