Image assets in CSS on Phoenix 1.6.0-rc.0

Yes, the external file loader is disabled by default on esbuild.

You can pass the loader to the watcher config in dev.exs

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.jpg=file)]},
  ]

It has some weird behaviour. I have added this but I still get an error:

 > css/app.css:23:26: error: No loader is configured for ".jpg" files: ../priv/static/images/background.jpg
    23 │     background-image: url("../../priv/static/images/background.jpg");
       ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

iex(1)> 1 error

Though it does actually render it. But when I try mix assets.deploy it just exists with status code 1.

 > css/app.css:23:26: error: No loader is configured for ".jpg" files: ../priv/static/images/background.jpg
    23 │     background-image: url("../../priv/static/images/background.jpg");
       ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error
** (Mix) `mix esbuild default --minify` exited with 1

Edit:

Also when I start the server I do have a file: priv/static/assets/background-AWF52KCK.jpg.

For the first error, have you restarted the server? dev.exs isn’t reloaded when you change it, so you need to stop and restart the server, if it doesn’t work I have no idea…

For the second one, mix assets.deploy is configured in the mix.exs file, pass the loader to the alias there and it should fix it.

defp aliases do
  [
    setup: ["deps.get"],
    "assets.deploy": ["esbuild default --minify --loader:.jpg=file", "phx.digest"]
  ]
end   

Actually it works. Looks like I didn’t actually comment out the previous line but kept it so the issue spawned on the first one but the second one worked (4am yay!).