How to add an image or an svg file in Phoenix?

It may sound basic but I’m not sure if I have to put my files in assets/static/images or straight to priv/static ?

I don’t get the interaction between assets folder and priv/static folder.

Can anyone help ?

Does it work with if you put an image in the /images folder? I think it’s better if you put it inside one of the folders listed in your app.web.ex file. Following line contains the list of folders and files which will be available to use.

 def static_paths, do: ~w(assets fonts images robots.txt)

If you have just a few files, you can list them inside this function but if you have more then that, you should user folders.

I was wondering the same thing a couple of days. According to the docs:

  • assets - a directory that keeps source code for your front-end assets, typically JavaScript and CSS. These sources are automatically bundled by the esbuild tool. Static files like images and fonts go in priv/static.
  • priv - a directory that keeps all resources that are necessary in production but are not directly part of your source code. You typically keep database scripts, translation files, images, and more in here. Generated assets, created from files in the assets directory, are placed in priv/static/assets by default.

TL;DR: assets are for files that will be bundled by esbuild. priv/static is for static files. Hence, images go in priv/static.

3 Likes

Thanks for your answer !