jack

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

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

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

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?

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29703 241
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement