What is the correct way of using a static / assets folder with Parcel 2?

[halvardssm]

As the title asks. I have a large number of static files (images, logos etc.) which I would like to include and make available by referencing them directly in the react-dom. Example:

render(){
  return <div><img src="static/logo.png" /></div>
}

Another use-case is when I want to reference the assets programmatically:

export const FunctionalImageComponent = ({ src: string }) => <img src={src} />
...
render(){
  return <FunctionalImageComponent src="static/logo.png" />
}

Thanks in advance!

[mischnic]

Parcel 1:

import logo from "static/logo.png";

render(){
  return <div><img src={logo} /></div>
}

Parcel 2:

import logo from "url:static/logo.png";

render(){
  return <div><img src={logo} /></div>
}

(The full path of the asset has to be statically analyzable)

[halvardssm]

Then it is unfortunately what I am looking for... I need to dynamically fetch files in the project I am working on and exposing a static assets folder would be the best way to do it. Thanks anyway!

[mischnic]

(Parcel 1 supports globs import files from "./images/*.png";, which might work if you have only a few possible folderDir values)

[halvardssm]

Right, but that will require me to import the whole folder during the initial render, and then pass along the files through my react component props... You only mentioned Parcel 1, does that mean it's not planned/working for Parcel 2? Is there no other way of linking a static folder? I have also tried to copy the static folder into the dist before parcel serve but this doesn't seem like the right approach either 🤔

[mischnic]

Follow #4683 regarding globs in Parcel 2

I have also tried to copy the static folder into the dist before parcel serve but this doesn't seem like the right approach either 🤔

That should work

[ghost]

I am getting this when importing a .png with url:...:

Cannot find module 'url:../static/parcel.png' or its corresponding type declarations.ts(2307)

(The full path of the asset has to be statically analyzable)

What do you mean by statically analyzable?