Not able to load image when using POW auth library

Phoenix Forum Questions / Help
, ,
1

I am a displaying an image on the header of the landing page of my phoenix app using the following loc:

<a href="/"><img src="images/logo.png" class="logo"></a>

I just recently integrated the POW auth library by @danschultzer in my app and now when I go the Sign in page http://localhost:4000/session/new or the Register page http://localhost:4000/registration/new, the image is not getting rendered. I am getting the following logs for each route:

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /session/images/logo.png (ArbitWeb.Router)

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /registration/images/logo.png (ArbitWeb.Router)

The image loads as expected on root http://localhost:4000/

2

You forgot the forward slash in the img src

<a href="/"><img src="/images/logo.png" class="logo"></a>

Maybe also use:

<a href="/"><img src="<%= Routes.static_path(@conn, "/images/logo.png") %>" class="logo"></a>
1 Like
3

What is the difference between static_path and static_url ?
And, why is it recommended to use these two functions over using a relative path to the image ?
(someone told me to not use relative paths to the image)

4

The relative path doesn’t work when the url is http://localhost:4000/registration/new then the image path will be http://localhost:4000/registration/images/logo.png

if you however start the path to the image /images/logo.png then you tell the browser to look for the images on a root level and it will be http://localhost:4000/images/logo.png.

This accidentally worked when you where at the root path. Also, you need to use the path helper

Routes.static_path(@conn, "/images/logo.png")

so it works in production when you add a digest to the file. In production the filename might be like

/images/logo-57b9cfe1c3f31082bae68d3cbf532643.png?vsn=d
2 Likes