مشكلة في استدعاء الصور في react + webpack + typescript

بحسب ما فهمت، تريد استخدام الصور في مشروع React ولكن لديك مشكلة في استدعاء الصور.

أولًا، يجب التأكد من أن المسار الذي تستخدمه صحيح لمكان الصورة، لذلك يجب عليك التأكد من المسار الذي تستخدمه في استدعاء الصورة ومكان وجود الصورة داخل مشروعك.

على سبيل المثال، إذا كانت الصورة داخل مجلد "images" الموجود في مجلد "src" ، يجب استدعاء الصورة بهذا الشكل:

<img src={require('../src/images/image.png')} alt="MyImage" />

و يمكنك استخدام import في أي ملف تريد استعمال الصورة فيه ، مثل هذا المثال:

import myImage from '../src/images/image.png';

واستخدام الصور هكذا.

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

وبذلك يمكنك استخدام الصور في أي مكان في مشروعك دون الحاجة إلى استدعائها في كل مرة باستخدام require.

بتاريخ 29 دقائق مضت قال Mohammed Fahmy3:

بحسب ما فهمت، تريد استخدام الصور في مشروع React ولكن لديك مشكلة في استدعاء الصور.

أولًا، يجب التأكد من أن المسار الذي تستخدمه صحيح لمكان الصورة، لذلك يجب عليك التأكد من المسار الذي تستخدمه في استدعاء الصورة ومكان وجود الصورة داخل مشروعك.

على سبيل المثال، إذا كانت الصورة داخل مجلد "images" الموجود في مجلد "src" ، يجب استدعاء الصورة بهذا الشكل:

<img src={require('../src/images/image.png')} alt="MyImage" />

و يمكنك استخدام import في أي ملف تريد استعمال الصورة فيه ، مثل هذا المثال:

import myImage from '../src/images/image.png';

واستخدام الصور هكذا.

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

وبذلك يمكنك استخدام الصور في أي مكان في مشروعك دون الحاجة إلى استدعائها في كل مرة باستخدام require.

لا بس انا عاوز استدعيها جوا loop 

يمكن استخدام الدالة `import()` لاستدعاء الصور داخل loop في React دون استخدام require. يمكن استخدام الدالة `map` مثلاً لتطبيق عملية على كل عنصر في مصفوفة البيانات واستخدام `import()` لاستدعاء الصور عند الحاجة. 

هذا مثال بسيط لكيفية استخدام `import()`:```

const images = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

const ImageList = () => (
  <div>
    {images.map((image, index) => (
      <div key={index}>
        <img src={import(`./images/${image}`).then(image => image.default)} alt="" />
      </div>
    ))}
  </div>
);

في هذا المثال، يتم استخدام `map` لتطبيق عملية على كل عنصر في مصفوفة الصور. يتم استخدام `import()` داخل دالة `map` لاستدعاء الصور وإظهارها في واجهة المستخدم. يتم استخدام `.then` لتمكين استدعاء الدالة بشكلٍ غير متزامن والحصول على القيمة المقدمة بعد تحميل الصورة.

ومن الأفضل استخدام طريقة import() المدعومة في ES6 لاستدعاء الصور في React. يمكن استخدام هذه الطريقة في أي ملف js داخل مشروع React. 

على سبيل المثال، إذا كانت تريد استدعاء صورة تسمى "example.png"، يمكنك استخدام الكود التالي:

import exampleImage from './example.png';

ثم يمكنك استخدام هذه الصورة في JSX عن طريق استخدام متغير الصورة:

<img src={exampleImage} alt="Example Image" />

يجب التأكد من توفر المسار الصحيح للصورة ووضعها في نفس المسار الذي يحتوي فيه الملف الذي تريد استخدامها به.
 

حاول تجربة استدعاء الصور باستخدام require() function لتحميل الصورة بشكل صحيح في اللوب، كالشكل التالي:

<div className="al1-posts">
  {posts.map((post) => {
    return (
      <Post
        _id={post._id}
        Likes={post.likes}
        loves={post.loves}
        haha={post.haha}
        wow={post.wow}
        sad={post.sad}
        angry={post.angry}
        author_avatar={post.author_avatar}
        author_name={post.author_name}
        comments_content={post.comments_content}
        comments_count={post.comments_count}
        content={post.content}
        createdat={post.createdat}
        date={post.date}
        updatedAt={post.updatedAt}
        key={post._id}
        image={require(`../images/${post.image}`)} // استدعاء الصورة هنا
      />
    );
  })}
</div>

حيث تم استدعاء الصورة باستخدام require() function داخل اللوب، مع تحديد المسار الصحيح للصورة باستخدام post.image،  وباستطاعتك استخدام هذا النهج في أي مكان يتم فيه استدعاء الصور.

بتاريخ 3 دقائق مضت قال Mustafa Suleiman:

حاول تجربة استدعاء الصور باستخدام require() function لتحميل الصورة بشكل صحيح في اللوب، كالشكل التالي:

<div className="al1-posts">
  {posts.map((post) => {
    return (
      <Post
        _id={post._id}
        Likes={post.likes}
        loves={post.loves}
        haha={post.haha}
        wow={post.wow}
        sad={post.sad}
        angry={post.angry}
        author_avatar={post.author_avatar}
        author_name={post.author_name}
        comments_content={post.comments_content}
        comments_count={post.comments_count}
        content={post.content}
        createdat={post.createdat}
        date={post.date}
        updatedAt={post.updatedAt}
        key={post._id}
        image={require(`../images/${post.image}`)} // استدعاء الصورة هنا
      />
    );
  })}
</div>

حيث تم استدعاء الصورة باستخدام require() function داخل اللوب، مع تحديد المسار الصحيح للصورة باستخدام post.image،  وباستطاعتك استخدام هذا النهج في أي مكان يتم فيه استدعاء الصور.

 

انا لما بعمل زي ما حضرتك قولت بيظهرلي الخطا ده 

بتاريخ 28 دقائق مضت قال منتصر احمد:

انا لما بعمل زي ما حضرتك قولت بيظهرلي الخطا ده 

سأذكر لك طريقتين لإستدعاء الصورة  في React و Webpack

الطريقة الأولى باستخدام require

الخطأ الذي في الصورة يحدث عندما يتم استخدام require() function داخل تعبير أو متغير، بدلاً من استخدامها في موضع يمكن التعرف عليه أثناء تحليل الكود بواسطة Webpack.

حاول استخدام مكتبة webpack-sources لتحويل المسارات المطلوبة إلى ثوابت خلال التحليل، ويمكن فعل ذلك بتحديث ملف Post.tsx إلى الشكل التالي:

import React from 'react';
import { Source } from 'webpack-sources'; // استدعاء webpack-sources

interface PostProps {
  _id: string;
  Likes: number;
  loves: number;
  haha: number;
  wow: number;
  sad: number;
  angry: number;
  author_avatar: string;
  author_name: string;
  comments_content: string;
  comments_count: number;
  content: string;
  createdat: string;
  date: string;
  updatedAt: string;
  image: Source; // استخدام Source بدلاً من string
}

const Post: React.FC<PostProps> = ({
  _id,
  Likes,
  loves,
  haha,
  wow,
  sad,
  angry,
  author_avatar,
  author_name,
  comments_content,
  comments_count,
  content,
  createdat,
  date,
  updatedAt,
  image, // استخدام الصورة هنا
}) => {
  return (
    <div className="al1-post" key={_id}>
      <div className="al1-post-header">
        <img src={author_avatar} alt={author_name} />
        <h3>{author_name}</h3>
        <p>{date}</p>
      </div>
      <p className="al1-post-content">{content}</p>
      {image && <img src={image} alt="Post Image" />} // استخدام الصورة هنا
      <div className="al1-post-reactions">
        <button>{Likes} Likes</button>
        <button>{loves} Loves</button>
        <button>{haha} Haha</button>
        <button>{wow} Wow</button>
        <button>{sad} Sad</button>
        <button>{angry} Angry</button>
      </div>
      <div className="al1-post-comments">
        <h4>{comments_count} Comments</h4>
        <p>{comments_content}</p>
      </div>
    </div>
  );
};

export default Post;

في المثال، تم استخدام Source بدلاً من string في النوع المعرف للخاصية image،  استخدام الصورة في المكان المناسب، وذلك بعد تحويلها إلى ثابت باستخدام webpack-sources.

ويجب عليك التأكد من تثبيت webpack-sources في مشروعك باستخدام npm قبل استخدامها، من خلال الأمر التالي:

npm i webpack-sources

الطريقة الثانية باستخدام import

باستطاعتك استخدام الـ import لاستيراد الصور في ملفات JavaScript أو TypeScript بدلاً من استخدام الـ require.

بالإمكان إضافة ملف الصور إلى مجلد الـ assets في مشروع React، ثم استيرادها باستخدام الـ import في المكان المناسب.

على سبيل المثال، إذا كان ملف الصور يسمى "image.png"، عليك استيراده كالتالي:

import React from 'react';
import image from '../assets/image.png';

const MyComponent = () => {
  return (
    <div>
      <img src={image} alt="My Image" />
    </div>
  );
};

export default MyComponent;

 تم استيراد الصورة باستخدام الـ import، واستخدامها في عنصر img في المكان المناسب، ويجب تحديد المسار الصحيح لملف الصورة في الاستيراد.

وبالتالي، يمكن استخدام هذه الطريقة أيضًا لاستدعاء الصور داخل اللوب الخاص بك في ملف Post.tsx، قم بتحميل الصور إلى مجلد الأصول (assets) الخاص بمشروع React، ثم إضافتها باستخدام الـ import في ملف Post.tsx.

بتاريخ 7 دقائق مضت قال Mustafa Suleiman:

سأذكر لك طريقتين لإستدعاء الصورة  في React و Webpack

الطريقة الأولى باستخدام require

الخطأ الذي في الصورة يحدث عندما يتم استخدام require() function داخل تعبير أو متغير، بدلاً من استخدامها في موضع يمكن التعرف عليه أثناء تحليل الكود بواسطة Webpack.

حاول استخدام مكتبة webpack-sources لتحويل المسارات المطلوبة إلى ثوابت خلال التحليل، ويمكن فعل ذلك بتحديث ملف Post.tsx إلى الشكل التالي:

import React from 'react';
import { Source } from 'webpack-sources'; // استدعاء webpack-sources

interface PostProps {
  _id: string;
  Likes: number;
  loves: number;
  haha: number;
  wow: number;
  sad: number;
  angry: number;
  author_avatar: string;
  author_name: string;
  comments_content: string;
  comments_count: number;
  content: string;
  createdat: string;
  date: string;
  updatedAt: string;
  image: Source; // استخدام Source بدلاً من string
}

const Post: React.FC<PostProps> = ({
  _id,
  Likes,
  loves,
  haha,
  wow,
  sad,
  angry,
  author_avatar,
  author_name,
  comments_content,
  comments_count,
  content,
  createdat,
  date,
  updatedAt,
  image, // استخدام الصورة هنا
}) => {
  return (
    <div className="al1-post" key={_id}>
      <div className="al1-post-header">
        <img src={author_avatar} alt={author_name} />
        <h3>{author_name}</h3>
        <p>{date}</p>
      </div>
      <p className="al1-post-content">{content}</p>
      {image && <img src={image} alt="Post Image" />} // استخدام الصورة هنا
      <div className="al1-post-reactions">
        <button>{Likes} Likes</button>
        <button>{loves} Loves</button>
        <button>{haha} Haha</button>
        <button>{wow} Wow</button>
        <button>{sad} Sad</button>
        <button>{angry} Angry</button>
      </div>
      <div className="al1-post-comments">
        <h4>{comments_count} Comments</h4>
        <p>{comments_content}</p>
      </div>
    </div>
  );
};

export default Post;

في المثال، تم استخدام Source بدلاً من string في النوع المعرف للخاصية image،  استخدام الصورة في المكان المناسب، وذلك بعد تحويلها إلى ثابت باستخدام webpack-sources.

ويجب عليك التأكد من تثبيت webpack-sources في مشروعك باستخدام npm قبل استخدامها، من خلال الأمر التالي:

npm i webpack-sources

الطريقة الثانية باستخدام import

باستطاعتك استخدام الـ import لاستيراد الصور في ملفات JavaScript أو TypeScript بدلاً من استخدام الـ require.

بالإمكان إضافة ملف الصور إلى مجلد الـ assets في مشروع React، ثم استيرادها باستخدام الـ import في المكان المناسب.

على سبيل المثال، إذا كان ملف الصور يسمى "image.png"، عليك استيراده كالتالي:

import React from 'react';
import image from '../assets/image.png';

const MyComponent = () => {
  return (
    <div>
      <img src={image} alt="My Image" />
    </div>
  );
};

export default MyComponent;

 تم استيراد الصورة باستخدام الـ import، واستخدامها في عنصر img في المكان المناسب، ويجب تحديد المسار الصحيح لملف الصورة في الاستيراد.

وبالتالي، يمكن استخدام هذه الطريقة أيضًا لاستدعاء الصور داخل اللوب الخاص بك في ملف Post.tsx، قم بتحميل الصور إلى مجلد الأصول (assets) الخاص بمشروع React، ثم إضافتها باستخدام الـ import في ملف Post.tsx.

يمكن استخدام الصور في React بطريقة مختلفة عن الأسلوب المذكور في السؤال. يمكن استخدام import لاستيراد الصورة وإضافتها كعنصر img . مثال:

import MyImage from '../images/image.png';

function App() {
  return (
    <div>
      <img src={MyImage} />
    </div>
  );
}

إذا واجهت مشكلة "the request of a dependency is an expression" عند استخدام require يمكن حل المشكلة عن طريق استخدام require خارج JSX وتخزين النتيجة في متغير واستخدامه في العنصر img. مثال:
 

import MyImage from '../images/image.png';

function App() {
  const imagePath = require('../images/image.png').default;

  return (
    <div>
      <img src={imagePath} />
    </div>
  );
}

ملاحظة: يجب استخدام .default مع require لاستخراج المسار الصحيح للصورة.