Not found the background images

I installed the Dart Sass and I am trying to put a background image:

html {
  background: url(images/background.svg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

my assets images has this:

$ tree assets/images
├── background.svg
└── cryptos
    ├── btc.svg
    ├── eth.svg
    └── ltc.svg

And when I run the phoenix server I am having this log error:

[info] GET /assets/images/background.svg
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/images/background.svg (PoeticoinsWeb.Router)
    (poeticoins 0.1.0) lib/phoenix/router.ex:406:
    (poeticoins 0.1.0) lib/poeticoins_web/endpoint.ex:1: PoeticoinsWeb.Endpoint.plug_builder_call/2
    (poeticoins 0.1.0) lib/plug/debugger.ex:136: PoeticoinsWeb.Endpoint."call (overridable 3)"/2
    (poeticoins 0.1.0) lib/poeticoins_web/endpoint.ex:1:
    (phoenix 1.6.6) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) /Users/romenigld/workspace/elixir/poeticoding/poeticoins/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) /Users/romenigld/workspace/elixir/poeticoding/poeticoins/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) /Users/romenigld/workspace/elixir/poeticoding/poeticoins/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 3.16.1) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

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

My project on Github

The default phoenix pipeline does no longer copy static assets. You need to put those files into priv/static/…

so every time I need to copy the images?
And when I deployed it will work?

It was this, thank you @LostKobrakai!
Does anyone have the configuration for doing this automatically?

You could just not have the files in assets, but maintain them only in priv/static

1 Like

I removed it and is ok with that, thank you!

I have another question.
When I run the mix assets.deploy it was created files with the *.gz extension, is it ok to have those files repeated?
As you can see I have one with the same name and others like a big number hash.


Those files will be created every time when I run the assets deploy?

Yes– these are the “digested” versions of your static assets. The hashes in the filename represent a specific version of your asset and they are used for cache-busting on the client-side. The ones with the .gz extension are created by the default gzip compressor. Check out the Phoenix.Digestor.Compressor for other compression options.

Yes– assets.deploy is a Mix Task alias defined in your mix.exs that builds and digests assets. Usually you only need to run this task for your production deployment, but running it locally is okay :slight_smile:

If you want to clean up all the digested assets, run the phx.digest.clean task with the --all flag:

$ mix phx.digest.clean --all
1 Like

Thank you @mcrumm for reply!

I am now trying to show the .svg icons from the folder priv/static/images/cryptos/btc.svg.

<img class="icon" src="/images/cryptos/btc.svg" >

And they are not shown. I tried other paths.
Sorry, but what do I need to do to show this?

Use the Routes.static_path() helper and you should be good to go :slight_smile:
Look for examples in your layout templates.

The problem was I downloaded the svg file with curl and I don’t now why it was like HTML code.
I downloaded now the SVG code and it worked.
Thank you"

1 Like