如何從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. 通過使用以下條目將.parcelrc文件添加到項目的根目錄來選擇加入glob 說明符：

    { "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> );

你可以在這個 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
        }
})});