Background-image in CSS not working in Phoenix 1.6

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”);