استيراد الصور ديناميكيًا من webpack

هذه الدالة سوف تحل المشكلة تماما

const importAll = require =>
  require.keys().reduce((acc, next) => {
    acc[next.replace("./", "")] = require(next);
    return acc;
  }, {});

const images = importAll(
  require.context("./image", false, /\.(png|jpe?g|svg)$/)
);

أو يمكنك عمل require ل static method وظيفتها استيراد للملفات داخل ملف العرض. مثل المثال التالي

render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return (
    <img src={graphImage}/>
    )
}

لا توجد طريقة مباشرة في ES6 لإستيراد جميع الملفات التي لديها صيغة معينة، لكن بدلًا من ذلك يمكنك أن تقوم بإستخدم require.context التي يوفرها Webpack لكي تستطيع إستيراد كل الملفات التي لديها صيغة معينة من مجلد معين، كالتالي:

const importImages = (r)=> r.keys().map(r);
const images = importImages(require.context('./', false, /\.(png|gif|jpe?g|svg)$/));

يقبل التابع require.context أربع مدخلات الأول إجباري والباقي مدخلات إختياريه، وهم كالتالي:

• directory: المجلد الذي تريد إستيراد الملفات منه،  "./" في المثال السابق تعبر عن المجلد الحالي current directory

• useSubdirectories: إستيراد الملفات من المجلدات الفرعية أم لا، القيمة الإفتراضية هي True أي أنه سيتم إستيراد جميع الصور من كل المجلدات الفرعية.

• regExp: عبارة عن regular expression لكي تقوم بإستيراد الملفات التي تنطبق عليها قاعدة regEx هذه، في المثال السابق سوف يتم إستيردا كل الملفات التي لها الصيغة (png أو gif أو jpeg أو jpg أو svg) فقط.

• mode: القيمة الإفتارضية هي 'sync'، لإستيراد الملفات بشكل متزامن.

يمكنك القيام بذلك من خلال التابع التالي:

//importAll تعريف تابع
function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}
// استخدامه
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
<img src={images['doggy.png']} />