reference static assets doesn't work

[g13ydson]

About PR #58 @, I would like to use Esbuild for all our static assets instead of using a different solution for images. I tried what is in the README, but it also generates .js/.css files in the output directory.

our script:

package.json

"scripts": {
    "build:js": "esbuild app/javascript/*.* --bundle --loader:.png=file --outdir=app/assets/builds/ --public-path=assets",
    "build:css": "sass app/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }

javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

There is an image in: javascript/images/logo.png

Is there a step I'm missing so that the image is copied to the output directory?

[richardkmiller]

Hi @g13ydson, your esbuild command looks correct. Esbuild won't output files that aren't imported and used in the JS, so maybe that's the cause of this issue?

You could try adding this to your javascript/application.js:

import Logo from './images/logo.png'
...
console.log(Logo)

Then when esbuild runs, the file should be copied and you'll see a line of output like this:

app/assets/builds/logo-5SRKKTLZ.png         308.3kb

Let me know if that doesn't fix it.

[g13ydson]

It worked perfectly. Thanks @richardkmiller