Background-image in CSS not working in Phoenix 1.6

I am using the new Phoenix 1.6 - installed from scratch.

in my css which is in assets/css/app.css

I have this line:

background-image: url(images/blue.png);

but I am getting this error:

error: Could not resolve “images/blue.png” (mark it as external to exclude it from the bundle)

the image is there, in priv/static/images/blue.png

Direct linking to the image from heex works, for example, this will show my image correctly:

<img src="/images/blue.png">

Any idea what is wrong?

try this
background-image: url("…/images/blue.png");

Thanks, I have tried but not working. Still the same error. If I comment out the background-image property everything goes fine. However, I need to use backgound images in my css ;).

Any idea what could be the culprit. In 1.5 it worked.

It is weird, I can successfully access the image from a browser like:

http://localhost:4000/images/blue.png

and the browser will show it.

But in app.css nothing works, no matter if I try:


background-image: url("../images/blue.png");
background-image: url("…/images/blue.png");
background-image: url("/images/blue.png");
background-image: url("images/blue.png");
background-image: url("../../images/blue.png");

After each I tried restarted the server via mix phx.server

Nothing works ;(

The css is loaded and working. All colors and styling works as it supposed to work, except the image via the background-image property.

When I try to use the absolute path:
background-image: url("http://localhost:4000/images/blue.png");

It works and image is shown on the page, together with other things from the css etc.

So, only the relative path is not working for some reason.

Any idea what is going on?

Any idea what could be the problem why relative paths in CSS don’t work in Phoenix 1.6?

Would you mind showing what your Plug.Static configuration is? css relative URL paths are relative to the location from which the css file itself was loaded. From your description it would seem that the location for the css file is different to the location of your images.

This is what I have there:

plug Plug.Static,
     at: "/",
     from: :myblog,
     gzip: false,
     only: ~w(assets fonts images
     apple-touch-icon-57x57.png
     apple-touch-icon-60x60.png
     apple-touch-icon-72x72.png
     apple-touch-icon-76x76.png
     apple-touch-icon-114x114.png
     apple-touch-icon-120x120.png
     apple-touch-icon-144x144.png
     apple-touch-icon-152x152.png
     apple-touch-icon-180x180.png
     favicon-32x32.png favicon-16x16.png favicon-96x96.png
     android-chrome-192x192.png
     mstile-144x144.png
     manifest.json
     robots.txt)

My images folder, which is whitelisted in “only” as well, contains blue.png .

This must be something with esbuild, because if I manually edit the css file in priv/static/assets/app.css the image is shown no problem.

So, when I save the full path in assets/css/app.css like:

background-image: url("http://localhost:4000/images/blue.png");

and run mix phx.server

it correctly puts the generated css file in priv/static/assets/app.css

Then when I edit this newly generated file and change that line to:

background-image: url("../images/blue.png");

and save I see:

[debug] Live reload: priv/static/assets/app.css

in my console and the image appears normally.

Any idea why esbuild is not working?

Could it have something to do with my operating system? Does esbuild have different paths on Linux (Kubuntu 20.04 in my case) than other OSes, perhaps? Or what else could cause this issue?

Or perhaps it’s too nested? My project is 6 directories deep from the /home directory on my Kubuntu, so it is something like this:

/home/me/Devel/Personal/MB/mb-local-2021-elixir-1-6---active/mb/myblog/priv/static/

This is getting insane.

I have just tried to create completely new installation of Phoenix 1.6 and it still doesn’t work.

Exactly what I did:

I went to my root of my home folder in Kubuntu 20.04 to eliminate the possible too-nested directories problem.

I run:

mix phx.new my_blog --live

Confirmed fetch and install dependencies question.

Then:
cd my_blog

and
mix ecto.create

and the DB was successfully created.

Then I run:

mix phx.server

and I now can successfully see the website on localhost:4000

So far, as expected. No problems.

Now, I went into this directory:

assets/css/

and opened this file:

phoenix.css

In this file I changed this:

header {
  width: 100%;
  background: #fdfdfd;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2rem;
}

into this:

header {
  width: 100%;
  background: #fdfdfd;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2rem;
  background-image: url("../images/phoenix.png");
}

and then I stopped the server via CTRL+C pressed twice and then
started it again:

mix phx.server
And I got no image shown on the website and this error in the terminal console:

[info] Running MyBlogWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access MyBlogWeb.Endpoint at http://localhost:4000
 > css/phoenix.css:629:24: error: Could not resolve "../images/phoenix.png"
    629 │   background-image: url("../images/phoenix.png");
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished, watching for changes...

At this point I don’t know what more to do.
Please, try to replicate these steps with the fresh Phoenix 1.6 install and let me know if you got the same result.
Thank you a lot in advance.

Hmm, I don’t know how to debug it.

I am currently reading this CSS: resolve relative paths without ./ prefix · Issue #469 · evanw/esbuild · GitHub and Different absolute/relative css image url path resolution between Windows and Linux · Issue #822 · evanw/esbuild · GitHub but I don’t know if it helps.

It’s very weird that nobody else encountered this problem before.

Shouldn’t the path be relative to the location of the file during compilation?
Did you try:
background-image: url("…/…/priv/static/images/blue.png");

I got this No loader is configured for ".png" files: ../priv/static/images/phoenix.png

error when I tried your path:

[info] Running MyBlogWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access MyBlogWeb.Endpoint at http://localhost:4000
 > css/phoenix.css:629:24: error: No loader is configured for ".png" files: ../priv/static/images/phoenix.png
    629 │   background-image: url("../../priv/static/images/phoenix.png");
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished, watching for changes...

Any idea how to solve this?

OK, I searched a bit and found this: Image assets in CSS on Phoenix 1.6.0-rc.0

So, in /config/dev.ex I replaced this line:

{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}

eith this line:
{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.png=file)]}

And, finally, it WORKS!

Now, another problem, how to support .jpg and .gif or all images as well? Because I don’t have only png files I use for background-image in my CSS.

I guess I have to somehow put more image formats in here: --loader:.png=file , right?

Any idea what is the correct format?

–loader option can be specified multiple times, such as here:

{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.png=file --loader:.svg=file)]}

etc.

Now, I have another problem. It duplicates my file in /priv/static/assets/ as phoenix-HEGEN2FR.png but I already have this file in /priv/static/images/.

I don’t want to have duplicit image files and I don’t want to have image file in assets folder where are css and js files.

Perhaps I am dumb, but this is really not user friendly at all. Is Phoenix 1.6 really meant to be used by average people? ;(

You should separate js world from elixir world.

Removing webpack for esbuild is a big change, You need to learn how to use it.

But why doesn’t it support images in CSS? What is the reasoning? Why not set reasonable settings for image files in CSS?

It does support images… with the appropriate loader.

Like webpack does, it’s similar.

That loader, I have no idea what that is, creates a copy of my existing file and put it in the asset folder where my output css and js are. I guess I now have to find a way how to not create a copy and how to not put it in my assets folder again. As I said the image is already in /images I don’t need it have again in /assets .

Now, I have to find out how to do these things.

And I have no idea where to start.

Perhaps it is esbuild thing but the problem is that there are no clear instructions how to make background-image work in CSS file.

For example, it’s so ugly to use

background-image: url('../../priv/static/images/blue.png');

instead of

background-image: url('../images/blue.png');

because in the end the image in the browser can be seen like:

http://localhost:4000/images/blue.png

etc.

I am sure I can set it somehow to accept a different path in the CSS, but this is so distant and NOT user friendly - at least if there were good docs. But there is almost nothing about how to setup these basic things in Phoenix 1.6.

If I was asking about something complicated, ok, but images in CSS? That’s absolutely basic and it should work out of the box.

Maybe this helps: Ignore url() resolving when bundling CSS · Issue #800 · evanw/esbuild · GitHub
Imo that should really be the default for things included in css.