Loading images and assets in phoenix 1.6.2

Phoenix Forum Questions / Help
,
1

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

2

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?

2 Likes
3

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?

2 Likes
4

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.

4 Likes
5

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

6

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…

7

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.

4 Likes
8

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.

1 Like
9

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

2 Likes
10

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.

11

You probably mean assets/static/images

It’s not really the asset compiler, it’s copy-webpack-plugin that does this move of files.

Latest versions of Phoenix does not use webpack, but esbuild. It is recommended to do it yourself now and place files in priv/static.

Unless You still use webpack (like I still do)

12

I have been facing the same issue, coming from Laravel, I thought that as long as the files are in the priv/static directory, it doesn’t matter where you place the images or js and css. I had placed the images , css and js files in priv/static/assets/client but there was an error in the console saying that those files are not found. So After doing research online, I placed the js and css files in the priv/static/assets directory and images in the priv/static/images directory and it worked.

13

You can use @socket instead of @conn if you are wondering.

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

15

Interesting on the esbuild with Phoenix. I think later versions of Rails are also moving away from Webpacker. (My Rails app is still on Sprockets :(( )

What I was saying is that the priv/static directory is going to be overwritten whenever webpacker compiles. so it’s not safe to put files directly into priv/static ONLY, as you will lose them.