dojap

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?

43 comments

/phoenix #liveview #esbuild #phoenix-16

0 5884 43

2021-10-07 19:20:23 UTC

Marked As Solved

mcrumm

Phoenix Core Team

We have been looking at it. Just a quick note – I understand that you are currently frustrated that something is causing you problems, but your tone to multiple people trying to help you out is off-putting. It it difficult to find motivation to approach this issue after reading the thread Please keep that in mind when asking for help and replying to others providing help.

That said, we have a solution that will fit your use case. Before we get there, one other note, for you and future readers: generally the reason that assets like images get duplicated is for the purpose of cache busting, as in the process by which we can tell client browsers to cache assets that rarely change for long periods of time and still allow those assets to be refreshed in a timely manner when they may change. Usually this is done by appending a hash of the file contents to the filename. This necessarily creates (at least) a duplication of your cached-busted (i.e. digested) assets.

So the behaviour you are seeing is esbuild trying to help you out by cache-busting your assets. However it sounds like you may not want that, so here is how you disable it in esbuild.

In your config/config.exs, find the esbuild configuration. It should look something like this:

config :esbuild,
  version: "0.12.18",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

append the external option to the list of args, so it looks like this:

args:
      ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/images/*)

Now, when you reference your image paths in css, do so with absolute paths just like you would in the browser:

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

and that’s it.

Now let’s say you do want cache-busting. Phoenix has you covered. Run mix assets.deploy, which is an alias in the generated mix.exs from the Phoenix installer. It runs the phx.digest command which will handle cache-busting for all of your assets in priv/static. To remove the digested assets, you can run mix phx.digest.clean --all.

Let us know how it goes!

Post #37

Also Liked

mcrumm

Phoenix Core Team

Dude I didn’t even know that flag existed until we started looking into this. So as much as it might not be what you wanted to hear, “check out the esbuild docs” ended up being the correct solution.

I agree, and I have opened a PR Add external flag to esbuild for fonts and images by mcrumm · Pull Request #4536 · phoenixframework/phoenix · GitHub

Please try to remember that we are all people, and for the most part all of the work happening here is volunteerism. Sometimes we miss stuff. Sometimes we find better solutions later. It’s all iterative. Have a good one!

Post #41

LostKobrakai

That used to be the case pre 1.6. In 1.6 only priv/static/assets are ignored and static assets are indeed meant to go into priv/static directly.

Post #34

BartOtten

But did you tell them you read all the docs and learned esbuild? Esbuild is quite new so not many people (at this forum) will have in depth experience. So all they can do is point in a direction. It’s up to you to go have a look and report if/when found an answer.

And in my experience: you will never lose even when you can’t find the answer in docs. Cause even then you have learned a lot by looking though them (so you learned a bit about esbuild) which will improve your broader knowledge.

There is a saying about a man and a fish. Don’t exactly know how it goes; but here you have a direction

Post #40