Loading images and assets in phoenix 1.6.2

jack

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”?

14 comments

/phoenix #assets #esbuild

0 12558 14

2025-06-10 17:17:08 UTC

Showing Posts 1 to 10

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

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?

Post #1

jack

Thank you!

The image was on assets/static/images/, none of the code snippets worked like copying it to priv/static/.

But I’ve put the image directly in priv/static/images/ and I can now use both:

<img src={ Routes.static_path(@conn, "/images/psi.png")} />

and

<img src="/images/psi.png" />

It was not an upgrade from Phoenix 1.5 but a direct 1.6 install.
I’m still a bit confused but at least it’s working, so I’ll assume I should use always priv/static… right?

Post #2

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.

Post #3

dev-rroslan

phoenix 1.6.6 is different, cannot do the above. Still trying

Post #4

jack

I’m not using Phoenix 1.6.6, did you find the solution?

This is a problem, it’s confusing to have things changing and breaking like that specially considering that sometimes the docs don’t mention how to do it.

I guess I’m not going to update Phoenix for a while…

Post #5

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.

Post #6

03juan

By the way, using <img src="/images/psi.png" /> directly won’t take advantage of the cache-busting feature of mix phx.digest. (also see the mix_tasks and Runtime configuration docs)

<img src={ Routes.static_path(@conn, "/images/psi.png")} /> will be compiled into something like <img src="/images/psi-eb0a5b9302e8d32828d8a73f137cc8f0.png" /> in production, which lets the browser fetch an updated image as soon as you make a new release instead of waiting until its cache expires. Very important if you’re serving static assets from a CDN or otherwise handling cache-control headers.

Post #7

silverdr

FWIW - I encountered a related problem while migrating to 1.6 where both CSS ans JS were not “statically” served. I had to replace my

/css/app.css with /assets/app.css

as well as

/js/app.js with /assets/app.js

Post #8

trechubet

The images should be put in assets/images and webpacker (or whatever is used to compile assets) should be putting them in priv/static. If someone is manually editing priv/static…and they have an asset compiler (which they should), these changes will be overwritten.

Post #9