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.
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.
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:
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.
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? ;(
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.
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.