Javascript React/Webpack需要动态图像，或者需要多少成本（img）

我正在创建一个React组件，它可以在大量背景图像中随机循环。根据我的理解，我可以在这里忽略Webpack，只动态生成require/import语句并将它们传递给组件

然而，如果我想让Webpack使用加载器并生成散列，等等，我还没有找到解决方案

这个问题与此类似，但回答没有解决问题：

我目前的解决方案只需要组件中的所有图像——然而，我想知道这的“成本”是什么——仅仅是增加包的大小？随附示例代码以演示我的意思：

import React from 'react';
import styles from './Background.css';

const pic0 = require('./imgs/0.jpg');
const pic1 = require('./imgs/1.jpg');
const pic2 = require('./imgs/2.jpg');
const pic3 = require('./imgs/3.jpg');
// etc etc etc

class Background extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pic: {},
    };
    this.changeBackground = this.changeBackground.bind(this);
  }

  componentWillMount() {
    this.setState({ pic: pic0 });
  }

  componentDidMount() {
    // set timeout here
  }

  changeBackground() {
    // change background via component state here
  }

  render() {
    return (
        <img className={styles.background} src={this.state.pic} />
    );
  }
}

export default Background;

从“React”导入React；
从“/Background.css”导入样式；
const pic0=require（'./imgs/0.jpg'）；
const pic1=require（'./imgs/1.jpg'）；
const pic2=require（'./imgs/2.jpg'）；
const pic3=require（'./imgs/3.jpg'）；
//等等等等等等
类后台扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
图：{}，
};
this.changeBackground=this.changeBackground.bind（this）；
}
组件willmount（）{
this.setState（{pic:pic0}）；
}
componentDidMount（）{
//在此设置超时
}
changeBackground（）{
//通过此处的组件状态更改背景
}
render（）{
返回(
);
}
}
导出默认背景；

---

想法？任何帮助都将不胜感激。

这取决于您配置webpack用于加载这些图像的加载程序

url加载器 当您使用url加载器时，图像的内容将被base64编码并嵌入到JavaScript包中

因此，您需要的图像越多，浏览器最初必须下载的捆绑包就越大。优点是所有图像都加载到浏览器中，可以立即显示

文件加载器 使用文件加载器时，图像文件将复制到分发文件夹（通常使用内容哈希重命名），图像的URL存储在JavaScript包中

需要大量图像对JavaScript包的大小影响很小。应用程序启动速度更快。缺点是，当您显示图像时，浏览器必须根据需要从服务器获取图像

总结 url加载器：更大的JS包，所有图像立即显示，更难利用图像缓存

文件加载器：更小的JS包，显示时单独检索图像，更好地利用图像缓存

根据您的问题陈述（在大量图像中随机循环），我将从

文件加载器开始

好消息是，无论哪种方式，您的JS代码都没有改变：您只需将导入的图像视为URL。如果你改变主意，这只是一个网页重新配置

由于您有一个完整的图像文件夹，我还建议使用，以便在一行中基本上需要整个文件夹：

const imageReq = require.context("./imgs", false, /\.jpg$/);

setUrl(i) {
   // "require" a specific image e.g. "./4.jpg"
   const url = imageReq(`./${i}.jpg`);
   this.setState({pic: url});
}

// ...