相关疑难解决方法(0)

所以这是我目前通过ES6在webpack中导入图像和图标的工作流程:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

这很快变得混乱.这就是我想要的:

import * from './images'

<img src={doggy} />
<img src={turtle} />

我觉得必须有一些方法动态导入特定目录中的所有文件,因为他们的名称没有扩展名,然后根据需要使用这些文件.

有人看过这个,或者对最好的方法有任何想法吗？

更新:

使用选定的答案,我能够这样做:

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']} />

从这个答案

动态添加图像React Webpack

我知道，如何在React + Webpack中使用常规图像src。

在srcset 2x内有空格的情况下，如何获得相同的结果？

看来我无法从这样的字符串导入：

从'./temp/picture@2x.jpg 2x'导入图片；

它可能由于内部空间而破裂。

我试图寻找一些插件，但这

https://github.com/herrstucki/sensitive-loader

明确指出不支持2x。

和这个

https://www.npmjs.com/package/srcset-loader

根本没有提到2x，所以我猜它也不支持它。

那么，有什么方法可以在这里使用srcset 2x吗？

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

但是，如果我希望 Webpack 使用加载器并生成哈希等 - 我还没有找到解决方案。

这个问题是类似的，但回答没有解决这个问题： Dynamically Add Images React 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 …