使用webpack动态从目录导入图像

10 浏览
0 Comments

使用webpack动态从目录导入图像

以下是我目前在webpack通过ES6导入图像和图标的工作流程：\n

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

\n这很快变得混乱。这是我想要的：\n

import * from './images'

\n我觉得一定有一种动态导入特定目录中的所有文件，并将这些文件的名称（不带扩展名）用作需要的方法。\n有人见过这样做过吗？或者对最佳方法有何看法？\n

\n更新：\n使用所选答案，我能够做到这一点：\n

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)$/));

0

3 答案

0 Comments

动态从目录中导入图像是一个常见的需求，特别是在使用Webpack进行项目构建时。然而，Webpack默认情况下不支持直接从目录中动态导入图像。这就导致了一个问题，即如何在Webpack中动态导入图像。

为了解决这个问题，可以使用一种函数式的方法来实现。首先需要在代码中引入一个名为importAll的函数，该函数将负责导入所有的图像文件。下面是使用这个函数的代码：

const importAll = require =>
  require.keys().reduce((acc, next) => {
    acc[next.replace("./", "")] = require(next);
    return acc;
  }, {});
const images = importAll(
  require.context("./image", false, /\.(png|jpe?g|svg)$/)
);

在上述代码中，首先定义了一个名为importAll的函数，它接受一个require函数作为参数。这个函数内部使用了Webpack提供的require.context方法来获取指定目录下的所有图像文件。然后通过调用require.context返回的函数，可以得到目录下所有图像文件的路径。接着，使用reduce函数对这些路径进行处理，并将处理后的路径存储在一个对象中。

最后，调用importAll函数并传入require.context方法的返回值作为参数，即可获取到所有的图像文件路径。

通过上述的函数式方法，可以在Webpack中动态导入目录中的图像文件，从而解决了这个问题。这样可以更方便地管理和使用图像资源，提高项目的开发效率。

0
0 Comments

问题的原因是需要动态从一个目录中导入图片，但是在使用webpack时遇到了问题。解决方法是在render方法中使用require方法来导入图片。

具体的解决方法如下：

1. 在render方法中，使用require方法来导入图片文件。例如，const graphImage = require('./graph-' + anyVariable + '.png')。

2. 使用导入的图片变量作为标签的src属性，例如：<img src={graphImage}/>。

此外，还需要修改webpack的配置文件，以使其能够正确处理动态导入的图片。请提供你的webpack配置文件。

需要注意的是，不建议像上述代码中使用全局的require语句。可以参考eslint.org/docs/rules/global-require了解更多信息。

完整的解决方法如下：

1. 在render方法中使用require方法导入图片文件。

2. 将导入的图片变量作为标签的src属性。

3. 修改webpack配置文件以正确处理动态导入的图片。

希望以上内容对你有帮助！

0
0 Comments

动态从目录中导入图片是一个常见的需求，但在ES6中并没有直接支持这样的功能。这是因为ES6的import和export是静态的，即在代码执行之前就确定了依赖关系。但是，如果使用webpack，可以考虑使用require.context来实现这个功能。

function importAll(r) {
  return r.keys().map(r);
}
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

上述代码中，我们定义了一个importAll函数，它接收一个require.context的返回值r作为参数，并通过r.keys().map(r)的方式将目录中的所有文件导入并返回一个数组。我们可以通过传入不同的参数来指定要导入的文件类型和目录位置。

此外，有一位用户在使用file-loader时遇到了问题，文件没有被正确移动到指定的目录。经过检查，发现加载器没有被正确执行。通过调整加载器的配置，问题被解决。

还有一位用户提到了在使用create-react-app时，importAll返回了空数组的问题。对于这种情况，没有给出明确的解决方案。

此外，还有用户提到了如何在TypeScript中使用require.context的问题。通过观察require.context的返回类型__WebpackModuleApi.RequireContext，可以将其作为参数类型传递给importAll函数，以解决TypeScript的报错问题。

最后，还有一位用户分享了如何使用返回的数组。数组中的每个元素都是一个对象，其中包含一个default属性，可以直接将其作为标签的src属性使用。

通过使用require.context和importAll函数，我们可以在webpack中动态导入目录中的图片文件，并在需要的地方使用这些文件。同时，我们还解决了一些与加载器和TypeScript相关的问题。

0