How to import all images from folder in JS?

Question

I have 1000 images in folder and I have to import all those images to project. I tried this:

import images from './img/*.jpg

It works just fine on localhost but when I try to deploy it on remote server it throws an error:

🚨 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'?

My 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

I'm assuming that you want to actually import the image URLs into your app, so that you can render them in html - is that right?

If so, here's how you do it:

1. Make sure you've installed @parcel/transformer-image and @parcel/resolver-glob into your project.
2. Opt into glob specifiers by adding a .parcelrc file to the root of your project with these entries:

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

3. (assuming that you actually want the urls of the images in your JS code - see above), write your import like this:

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

   The images object at runtime will look like this:

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

4. You could render the images object with a framework of your choice. Here's how you would do it in 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> );

You can see a working example in this repo

Edit : I also noticed something weird in your package.json that you might want to fix - you've included both parcel v2 ( parcel ) and parcel v1 ( parcel-bundler ). I'd recommend removing v1 and re-installing to make sure your parcel commands are indeed running v2. (The example above assumes you are running v2).

Answer 2

You have to go through each file and check if it is an img.

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