Image assets in CSS on Phoenix 1.6.0-rc.0

Phoenix Forum Questions / Help
,
1

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?

2

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

4 Likes
3

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.

4

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
5

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