javascript 使用webpack动态导入和使用图像并做出反应

Posted 2021-05-04

// https://webpack.js.org/guides/dependency-management/#context-module-api

function importAllFilesForWebpack(requireContext) {
  return requireContext.keys().reduce((acc, key) => (
    { ...acc, [key.slice(2)]: requireContext(key) }
  ), {});
}

const allPhotos = importAllFilesForWebpack(require.context('../photos', true, /\.jpg$/));

<ul>
  {photos.map((photo, index) => {
    // photo is a string containing file name and extension
    return <li key={index}><img src={allPhotos[photo]} alt=""/></li>
  })}
</ul>