Do something like this (you need to tell parcel to include that asset in the build output):

plane.src = require("./static/assets/jplane.png"); // returns a url to the img, e.g. '/jplane.0735d1ef.png'

Maybe something like https://en.parceljs.org/module_resolution.html#glob-file-paths?

Since the image was in “…/static/assets” directory relative to the javascript file, I had to change the path you gave me to “…/static/assets/jplane.png”. After that, it worked. Thanks!

Do something like this (you need to tell parcel to include that asset in the build output):

plane.src = require("./static/assets/jplane.png"); // returns a url to the img, e.g. '/jplane.0735d1ef.png'

This gives me the error “Browser scripts cannot have imports or exports”. Is there any way to actually tell Parcel an image exists without using modules (i.e. a classic script)?

Not sure of it solves it, but do you have type=“module” in your script tag?

During bundling, Parcel has to determine that parameter of the require without executing the code.

Therefore, image.src = require(myImage) doesn’t work, because the value of myImage isn’t known and even if that variable was looked up, speaker.image isn’t known at bundle time.

There’s a bunch of parcel plugins to handle copying static assets (which isn’t the same as being able to pull them through the optimization pipeline, but may solve some of the same uses cases where you don’t want to use modules).

However, although there were decent ones for v1 (see https://github.com/parcel-bundler/parcel/issues/3056#issuecomment-678915568), there’s like 5 different ones for v2 that are all super limited and don’t even support watching.

The best solution seems to be something like

"scripts": {
    "start": "parcel",
    "build": "parcel build index.html assets/** static/**"
  },

If there’s any better options (esp being able to optimize images), I’m all ears.

Maybe something like https://en.parceljs.org/module_resolution.html#glob-file-paths?

Hello,

I need to use something like that but I don’t fully understand how it works so my attempts fail…

In short, I need to change the src of my image depending on the result of a function that returns the name of the image. When I use import image from "/assets/note-8.png" document.querySelector("#demo").src = image it works. But it’s useless to my goal. I programmatically determine which image to use, so I would like to import images from "/assets/*.png" and then access a precise image with something like image["myFunction()"] But that doesn’t work. Even image["note-8"] doesn’t work. How can I access a precise image?

Edit : turns out it’s just that my path was wrong in the import. import image from "./assets/note-8.png" works.

Not sure of it solves it, but do you have type=“module” in your script tag?

The sentence you’re replying is asking for a way to do it without modules…

If you just need to reference some static files in your JavaScript, you can also use this Parcel plugin to copy them over to a static location:

https://github.com/elwin013/parcel-plugin-static-files-copy