如何从JS中的文件夹中导入所有图像？

Question

我的文件夹中有 1000 张图像，我必须将所有这些图像导入到项目中。我试过这个：

import images from './img/*.jpg

它在本地主机上工作得很好，但是当我尝试将它部署在远程服务器上时，它会抛出一个错误：

???? Build failed.
8:44:50 AM: @parcel/core: Failed to resolve './../img/*.jpg' from './src/js/model.js'
8:44:50 AM:   /opt/build/repo/src/js/model.js:1:18
8:44:50 AM:   > 1 | import imgs from './../img/*.jpg';
8:44:50 AM:   >   |                  ^^^^^^^^^^^^^^^^^^^^
8:44:50 AM:     2 | import { AMOUNT_OF_IMAGES } from './config.js';
8:44:50 AM:     3 |
8:44:50 AM: @parcel/resolver-default: Cannot load file '../img/*.jpg' in './src/js'.
8:44:50 AM: ???? Did you mean '../img/1.jpg'?
8:44:50 AM: ???? Did you mean '../img/2.jpg'?

我的 package.json：

{
    "default": "index.html",
    "scripts": {
        "start": "parcel index.html",
        "build": "parcel build index.html -d ./dist --no-minify"
    },
    "license": "ISC",
    "devDependencies": {
        "@parcel/transformer-image": "^2.0.0-rc.0",
        "parcel": "^2.0.0-rc.0",
        "parcel-bundler": "1.12.5"
    },
    "dependencies": {
        "core-js": "^3.18.0",
        "img": "^3.0.3",
        "regenerator-runtime": "^0.13.9"
    }
}

Answer 1

我假设您希望将图像 URL 实际导入到您的应用程序中，以便您可以在 html 中呈现它们 - 对吗？

如果是这样，你可以这样做：

1. 确保您已将@parcel/transformer-image 和@parcel/resolver-glob 安装到您的项目中。
2. 选择加入glob specifiers，将.parcelrc 文件添加到项目的根目录，其中包含以下条目：

   {
       "extends": "@parcel/config-default",
       "resolvers": ["@parcel/resolver-glob", "..."]
   }
   

3. （假设您实际上想要 JS 代码中图像的 url - 见上文），请像这样编写您的导入：

   import images from "url:./images/*.jpg";
   
   

   运行时的 images 对象将如下所示：

   {
      "[fileName1]": "[path to fileName1.jpg]",
      "[fileName2]": "[path to fileName2.jpg]",
   }
   

4. 您可以使用您选择的框架呈现images 对象。以下是你在 React 中的做法：

   const App = () => (
    <div>
      <h1>Images Imported with Glob Import</h1>
      {Object.entries(images).map(([imageName, imageUrl]) => (
        <div key={imageUrl}>
          <h2>{imageName}</h2>
          <img src={imageUrl} />
        </div>
      ))}
    </div>
   );
   

您可以在this repo 中看到一个工作示例

编辑： 我还注意到您的 package.json 中有一些奇怪的东西，您可能想要修复 - 您已经包含了 parcel v2 (parcel) 和 parcel v1 (parcel-bundler)。我建议删除 v1 并重新安装以确保您的 parcel 命令确实在运行 v2。 （上面的示例假设您运行的是 v2）。

Answer 2

你必须浏览每个文件并检查它是否是一个img。

fs = require('fs')
fs.readdir('./img/', (err, files) => {
    files.forEach(file => {
        if(file.endsWith(".jpg")) {
            console.log(file);
            // Your Code
        }
})});