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

إن كانت الصور في مجلد 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;

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

عليك أولاً إنشاء ملف 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;