Javascript 使用require&；进行网页包/React动态图像导入；上下文

到处搜索…有很多建议，但没有什么感觉是“正确的”。我想要一个真正的动态CSS背景图像：

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

使用我的react组件，我想避免从“../../img1.jpg”导入img1的

列表过长；从“./../img2.jpg”

等处导入img2（例如）

因此，我尝试使用

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;

在UI中呈现时，效果“良好”：

但我不喜欢这里的代码

如果我尝试只使用

const imgContext=require.context（“../../../public/assets/img/bgs/，true）

然后引用

imgContext（i）

找不到

/1\u bgimage.jpg）

的相对路径，因此我似乎需要完整的url，包括

。/../../../public/assets/img/bgs/

我有什么遗漏吗

我是否可以对我的webpack配置执行一些操作，使其不必声明

。/../public

？

您可以使用webpack“resolve alias”指定包含资产的文件夹，从而缩短导入中的路径。

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]",
            },
          },
        ],
      },
    ],
  },