Use files from custom storage

Phoenix Forum Questions / Help
, ,
1

Hello there!
I have troubles with using files in my react frontend, I can use files in my component, for example in img tag which are located only in images folder, (example <img src="images/image.png" />). My problem is that I want to use files which are placed in some other place in machine, any idea how I can do it?

My file structure:

.
├── README.md
├── assets
│   ├── css
│   │   ├ ...
│   ├── js
│   │   ├── app.js
│   │   ├── components
│   │   │    ├ ...
│   │   └── socket.js
│   ├── package-lock.json
│   ├── package.json
│   ├── static
│   │   ├── favicon.ico
│   │   ├── images
│   │   │   ├ ...
│   │   └── robots.txt
│   └── webpack.config.js
├── config
│   ├── config.exs
│   ├── dev.exs
│   ├── prod.exs
│   ├── prod.secret.exs
│   └── test.exs
├── deps
├── erl_crash.dump
├── lib
│   ├── my_app
|             ├ ...
│   └── my_app_web
|             ├ ...
│   ├── my_app.ex
│   └── my_app_web.ex
├── mix.exs
├── mix.lock
├── package-lock.json
├── priv
└── test
2

The image files are actually being served from my_app/priv/static/images by Plug.Static. Webpack automatically copies them there from my_app/assets/static/images.

Phoenix configures Plug.Static in my_app/lib/my_app_web/endpoint.ex

...
# Serve at "/" the static files from "priv/static" directory.
#
# You should set gzip to true if you are running phx.digest
# when deploying your static files in production.
plug Plug.Static,
  at: "/",
  from: :web,
  gzip: false,
  only: ~w(css fonts images js favicon.ico robots.txt)
...

Depending on what you what to do you can either edit the configuration in endpoint.ex or use another option like nginx to serve the images (or other static) files directly if you plan to use nginx as a reverse proxy in front of Phoenix.

EDIT:
In development you can also make use of a symlink in my_app/priv/static pointing to another directory. Just be sure to add it to the configuration in endpoint.ex.

...
  gzip: false,
- only: ~w(css fonts images js favicon.ico robots.txt)
+ only: ~w(css fonts images my_symlink js favicon.ico robots.txt)

In production you would probably want to consider using nginx or some other option.