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"
    }
}

What does "import images into project" even mean? FYI, the Javascript keyword `import` does not accept wildcards in the filename. The `import` keyword must point to a single module file. — jfriend00, Sep 27 '21 at 06:45
Check out this documentation: https://v2.parceljs.org/features/dependency-resolution/#glob-specifiers — Andrew Stegmaier, Oct 05 '21 at 21:28

Andrew Stegmaier · Answer 1 · 2021-10-08T15:22:54.863

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:

Make sure you've installed @parcel/transformer-image and @parcel/resolver-glob into your project.

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", "..."]
}

(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]",
}
```

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).

How to import all images from folder in JS?

1 Answers1