How to load multiple images with parcel?

Question

I have a pixi.js app that depends on multiple images which are inside a folder and i want to use parcel bundler. I can import them one by one (import logo from "./color/btc.png" works as expected) but when i tried to import folder, parcel give this error.


  /Users/user1/Desktop/pixi001/src/app.js:2:20
    1 | import { Application, Container, Sprite } from "pixi.js";
  > 2 | import logos from "./color/*.png";
  >   |                    ^^^^^^^^^^^^^^^
    3 | const app = new Application({
    4 |     width: window.innerWidth,

@parcel/resolver-default: Cannot load file './color/*.png' in './src'.
 Did you mean './color/d.png'?
 Did you mean './color/r.png'?

Is there anyway to achieve this with parcel bundler?

This is the rest of the code.

import { Application, Container, Sprite } from "pixi.js";
import logos from "./color/*.png";
const app = new Application({
    width: window.innerWidth,
    height: window.innerHeight,
    resizeTo: window,
    backgroundColor: 0xffffff,
    resolution: 1,
    backgroundAlpha: 0
});
document.body.appendChild(app.view);
const container = new Container();
app.stage.addChild(container);
logos.forEach(logo => {
    const sprite = new Sprite.from(logo);
    sprite.x = Math.random() * innerWidth;
    sprite.y = Math.random() * innerHeight;
    container.addChild(sprite);
});

user_4739687 · Answer

You can get this working by using Parcel's glob specifiers feature. Here's what you need to do:

Add @parcel/resolver-glob to the "resolvers" pipeline of your .parcelrc file. If you don't have a .parcelrc file yet, create one at the root of your project that looks like this:
```
{
  "extends": "@parcel/config-default",
  "resolvers": ["@parcel/resolver-glob", "..."]
}
```
If you restart parcel, it should automatically install the @parcel/resolver-glob package into your project, but in case that fails, you can always add it manually with yarn add/npm install/etc.
Import references to the files in your folder using this syntax:
```
import * as logos from "./colors/*.png";
```
If the colors folder contains two files a.png and b.png, then the logos variable at runtime will be an object that looks like this:
```
{
   a: "string url to a.png",
   b: "string url to b.png"
}
```

Iterate over the values of the logos object, and do whatever you want with the image URLs, e.g.:

Object.values(logos).forEach((logoUrl) => {
  const sprite = new Sprite.from(logoUrl);
  // ...
});

How to load multiple images with parcel?

1 Answers