Not found the background images

romenigld

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

9 comments

/phoenix #dart-sass

0 778 9

2022-04-28 18:21:28 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

LostKobrakai

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

Post #1

romenigld

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

Post #2

romenigld

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

Post #3

LostKobrakai

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

Post #4

romenigld

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?

Post #5

mcrumm

Phoenix Core Team

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

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

Post #6

romenigld

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?

Post #7

mcrumm

Phoenix Core Team

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

Post #8

romenigld

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"

Post #9

— All posts loaded —