Image assets in CSS on Phoenix 1.6.0-rc.0

Hi there!

I was super hyped when I heard Phoenix 1.6 dropped anything to do with Node! Saves such headaches, but I instantly got a new headache after that…

I’m trying to load an image into my assets/css/app.css. The image itself is stored in priv/static/images/background.jpg.

I want to note that I can access the image wile going to http://localhost:4000/images/background.jpgand using

When I try to use background-image: url('/images/background.jpg'); I get the following error:

[watch] build started (change: "css/app.css")
 > css/app.css:19:26: error: Could not resolve "/images/background.jpg"
    19 │     background-image: url('/images/background.jpg');
       ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished

Then I did try to put a relative path: background-image: url('../../priv/static/images/background.jpg'); and I got this error:

[watch] build started (change: "css/app.css")
 > css/app.css:19:26: error: No loader is configured for ".jpg" files: ../priv/static/images/background.jpg
    19 │     background-image: url('../../priv/static/images/background.jpg');
       ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished

Is there something I need to configure first in order for esbuild to look at my images?

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)]},
  ]

https://esbuild.github.io/content-types/#external-file

2 Likes

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!).