Динамический импорт изображений Webpack / React с помощью require & context

Question

Поиск вокруг ... много предложений, но ничто не кажется "правильным". Я хочу иметь истинное динамическое фоновое изображение CSS:

const StyledDiv = styled.div`
  background-image: url(${props => props.img});
  width: 200px;
`;

с использованием моего компонента реагирования, я хочу избегать с длинным списком import img1 from "../../img1.jpg"; import img2 from "../../img2.jpg" и так далее (как пример).

Поэтому я пытаюсь использовать require.context(path) для генерации количества элементов в каталоге. И я реализую так:

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

import hdImg from "../../../public/assets/img/hd_bgimage.jpg";

// get the number of items in the directory
const imageKeys = require
  .context("../../../public/assets/img/bgs/", true)
  .keys();

function getBgImage(num) {
  const imageUrl = require(`../../../public/assets/img/bgs/${num}_bgimage.jpg`);
  return imageUrl;
}

const StyledDiv = styled.div`
  background-image: url(${props => props.img});
  width: 200px;
`;

const StyledImg = styled.img`
  width: 200px;
`;

const Home = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <div id="container">
        {imageKeys.map((item, i) => (
// loop over items from context
          <StyledDiv id="image-bg" img={getBgImage(i + 1)} key={item}>
            this is a background image CSS
          </StyledDiv>
        ))}
      </div>
      <StyledImg id="img" src={hdImg}></StyledImg>
      <Link to="/link">Test Link</Link>
    </div>
  );
};

export default Home;

webpack.config.base:

module.exports = {
  entry: {
    app: [path.join(__dirname, "./src/scripts")],
  },
  output: {
    publicPath: "/",
    filename: "[name]-bundle.js",
  },
  module: {
    rules: [
       // js removed
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "[name].[ext]",
            },
          },
        ],
      },
    ],
  },

все работает "отлично" при визуализации в пользовательском интерфейсе:

но мне не нравится здесь код.

Если я попытаюсь использовать просто const imgContext = require.context("../../../public/assets/img/bgs/, true), а затем указать imgContext(i) относительный путь ./1_bgimage.jpg)не найден, поэтому мне кажется, что мне нужен полный URL, включая ../../../public/assets/img/bgs/.

Есть ли что-то, чего мне не хватает?

Есть ли что-то, что я могу сделатьс моей конфигурацией webpack, чтобы не объявлять ../../../public ??