0
votes

I am trying to incoporate a html5/boostrap theme I bought into a phoenix framework app I'm working on. The theme has regular html files (one for each page), js, css, font and images folders. I moved the theme specific js and css files to the web/static/js and web/static/css. I moved the third party js and css files into the respective folders under web/static/vendor/js and web/static/vendor/css, These files include for (css: animate.css, bootstrap.css, flaticon.css, font-awesome.css, hover.css, responsive.css, resolution-slider.css, owl.css), (js: bootstrap.min.js, jquery.js, bxslider.js, revolution.min.js, validate.js).

The images for the app was moved to web/static/assets/images and the graphics can be found at web/statc/assets. I have not made any changes to brunch-config.js.

I have managed to get app.html.eex and index.html.eex to adopt the theme. At the moment when I access localhost:4000, I see the following on the console [info] GET /css/assets/timer.png [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /css/assets/timer.png (RocfDev.Router)

I tracked the timer.png resource request to the file web/statc/vendor/css/resolution-slider.css. The css code in the file is background:url(assets/timer.png).

timer.png is actually located in web/static/assets. Phoenix seems to be able to serve all the images and graphics ok except timer.png.

My question is why is phoenix trying to serve timer.png from the wrong folder.

Thanks.

1

1 Answers

0
votes

background:url(assets/timer.png) - the URL here is relative, so the browser thinks that it should look for timer.png file in #{path_to_directory_of_source_css_file}/assets/timer.png.

Changing given line to background:url(/assets/timer.png) should help.