Not found the background images

Phoenix Forum Questions / Help
,
1

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
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: PoeticoinsWeb.Router.call/2
    (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: PoeticoinsWeb.Endpoint.call/2
    (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

2

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

3

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

4

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

5

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

1 Like
6

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.

	priv/static/images/background-1737344b5ddaef3b7ebb454ada9bb8aa.svg
	priv/static/images/background-1737344b5ddaef3b7ebb454ada9bb8aa.svg.gz
	priv/static/images/background.svg.gz
	priv/static/images/cryptos/btc-de56c6cac4c3657a23737ec7a2dd1cf6.svg
	priv/static/images/cryptos/btc-de56c6cac4c3657a23737ec7a2dd1cf6.svg.gz
	priv/static/images/cryptos/btc.svg.gz
	priv/static/images/cryptos/eth-8e719c977171991755a31f4f278f1e78.svg
	priv/static/images/cryptos/eth-8e719c977171991755a31f4f278f1e78.svg.gz
	priv/static/images/cryptos/eth.svg.gz
	priv/static/images/cryptos/ltc-d315264a3a5bf2c35892d4952b6bcb1f.svg
	priv/static/images/cryptos/ltc-d315264a3a5bf2c35892d4952b6bcb1f.svg.gz
	priv/static/images/cryptos/ltc.svg.gz

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

7

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
8

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?

9

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

10

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