jack
Loading images and assets in phoenix 1.6.2
Hello there,
I’m trying to load image assets in heex html code.
I’ve tried the following:
<img src="<%= Routes.static_path(@conn, "/images/psi.png") %>"/>
Compile error: expected closing " for attribute value
<img src={ Routes.static_path(@conn, "/images/psi.png") } />
<img src={ Routes.static_path(@conn, "/psi.png") } />
It compiles but doesn’t render the image and trying to open the image in a new tab it complains:
no route found for GET /psi.png
<img src="/images/psi.png" />
Trying to load the image directly is just the same, no render, no route found.
My endpoint:
plug Plug.Static,
at: "/",
from: :health,
gzip: false,
only: ~w(assets fonts images favicon.ico robots.txt)
I would like to ask for help to understand why it doesn’t work and what is the correct way of using it?
<%= Routes %>, { Routes } or directly passing “/images/x”?
Most Liked
kokolegorille
It’s because Phoenix 1.6 dropped webpack and npm. Now that copy-webpack-plugin is removed, You need to copy manually in priv/static.
This one is better in case You digest your assets for production.
03juan
From 1.6.0 the docs say that all other assets, that usually don't have to be preprocessed, go directly to "priv/static".
1.6.1 added the Images, fonts, and external files section, saying that the images are already managed by Phoenix, meaning that it’ll serve the static_path directly from priv/static, and that running mix phx.digest will create digested files for all of the assets in priv/static/images, so your images and fonts are still cache-busted.
Placing all images in priv/static/images manually is the “correct” way as of 1.6 as there is no real difference between an app generated with v1.6.0 or v.1.6.6
So the question is what’s not working for you?
I was also quite confused by the asset changes, especially upgrading from phoenix 1.5.x. This tripped me up, but also didn’t take into account the .gitignore changes to account for the new structure, which only ignores specific assets
- pre-1.6
# Since we are building assets from assets/, # we ignore priv/static. You may want to comment # this depending on your deployment strategy. /priv/static/ - 1.6.x
# Ignore assets that are produced by build tools. /priv/static/assets/ # Ignore digested assets cache. /priv/static/cache_manifest.json
Then just moving my files from assets/static to priv/static did the trick.
kokolegorille
Where did You put the image?
Is it an upgrade from Phoenix 1.5?
For the first option, You need to put the file in priv/static/images.
The later use assets/static, and it’s copied to priv/static/
What do You have in priv/static/images?
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









