اذهب إلى المحتوى
  • 0

استيراد الصور من json و عرضها في React

حسن الشافعي2

السؤال

في مشروع React لدي مجلد ب اسم img يحتوي على عدة صور و كذلك في نفس المشروع لدي ملف json يحتوي على معلومات هذه الصور بالاظافة الى اسماء الصور

اقتباس

(مجلد الصور و ملف json داخل المشروع نفسه وليس من مصدر خارجي )

قمت بعمل compnent يعرض الصور و معلوماتها و باستخدام دالة map اقوم ب ارسال البيانات لعرضها 
المشكلة ان الصور لاتعرض حيث لا يتعرف عليها ال component اي عندما اعطي عنوان المجلد مثلا ( img/../. ) و اسم الصورة من ملف json  يظهر في ال console العنوان الصحيح و الاسم و كذلك في tag img يظهر الرابط صحيح لكن الصورة لا تظهر 
وعند استدعاء الصورة بواسط imoprt و وضع نفس العنوان تظهر الصورة

اقتباس

(عندما عرضت العنوان بعد استخدام import  ظهر لي اسم الصورة هكذا (http://localhost:3000/static/media/item.a8455.png)) في src


كيف يمكن جلب الصور بدون عمل import لان هذه الطريقة يدوية و انا املك العديد من الصور و اريد استخدام ملف json ليقوم بالعملية

 image.png.382278bdeac7d6eb0071624ee0281bba.png

التاك الاول ل img ب استخدام import و هو يظهر الصورة 
التاك الثاني ل img ب استخدام json و وضع العنوان في src و لا يظهر الصورة 
مع العلم انهما نفس الصورة 

تم التعديل في بواسطة حسن الشافعي2
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

إن كانت الصور في مجلد images بداخل المجلد public تحتاج إلى التأكد من المسارات التي تضعها بداخل ملف JSON لتكون بالشكل التالي:

[
  {
    "id": 1,
    "name": "Image 1",
    "url": "images/chair1.jpg"
  },
  {
    "id": 2,
    "name": "Image 2",
    "url": "images/chair2.jpg"
  },
  {
    "id": 3,
    "name": "Image 3",
    "url": "images/chair3.jpg"
  },
  {
    "id": 4,
    "name": "Image 4",
    "url": "images/chair4.jpg"
  }
]

ثم من خلال المكون تقوم بإستيراد ملف json بالشكل التالي:

import Images from "./records.json";

ثم من داخل المكون تعرض الصور بالشكل التالي:

import Images from "./records.json";

function App() {
  return (
    <div className="App">
      {Images && Images.map(image => {
        return <div key={image.id} className="card">
            <img className="card-img-top" src={image.url} alt={image.name}/>
        </div>}) }
    </div>
  );
}

export default App;

إن كانت الصور بداخل المجلد src ثم img مثلاً: ملف json بالشكل التالي:

[
  {
    "id": 1,
    "name": "Image 1",
    "url": "img/chair1.jpg"
  },
  {
    "id": 2,
    "name": "Image 2",
    "url": "img/chair2.jpg"
  },
  {
    "id": 3,
    "name": "Image 3",
    "url": "img/chair3.jpg"
  },
  {
    "id": 4,
    "name": "Image 4",
    "url": "img/chair4.jpg"
  }
]

ثم تستخدم require بداخل src:

import Images from "./records.json";

function App() {
  return (
    <div className="App">
      {Images && Images.map(image => {
        return <div key={image.id} className="card">
            <img className="card-img-top" src={require(`./${image.url}`)} alt={image.name}/>
        </div>}) }
    </div>
  );
}

export default App;

و تُعدل المسارات بما يتوافق معك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

عليك أولاً إنشاء ملف JSON يحتوي على بيانات الصور وليك ملف data.json بمحتوى مشابه لهذا:

[
  {
    "id": 1,
    "src": "https://placehold.co/600x400",
    "alt": "صورة 1"
  },
  {
    "id": 2,
    "src": "https://placehold.co/600x400",
    "alt": "صورة 2"
  },
  {
    "id": 3,
    "src": "https://placehold.co/600x400",
    "alt": "صورة 3"
  }
]

في تطبيق React قم بإنشاء مكون (component) لعرض الصور وليك مكون اسمه ImageGallery:

import Images from './assets/data.json';

const App = () => {
  console.log(Images);
  // عرض الصور في المكون
  return (
    <div>
      {Images.map(image => (
        <img key={image.id} src={image.src} alt={image.alt} />
      ))}
    </div>
  );
};

export default ImageGallery;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...