0

私が取り組んでいるphoenixフレームワークアプリケーションに買ったhtml5/boostrapテーマを組み込むことを試みています。テーマには、通常のhtmlファイル(各ページに1つ)、js、css、font、およびimagesフォルダがあります。テーマ固有のjsとcssファイルをweb/static/jsweb/static/cssに移動しました。サードパーティ製のjsファイルとcssファイルをweb/static/vendor/jsweb/static/vendor/cssというそれぞれのフォルダに移動しました。これらのファイルには(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)が含まれています。HTML5/Bootstrapテーマをフェニックスフレームワークアプリケーションに埋め込む

アプリの画像はweb/static/assets/imagesに、グラフィックはweb/statc/assetsにあります。私はbrunch-config.jsを変更していません。

テーマを採用するためにapp.html.eexとindex.html.eexを取得できました。 localhost:4000にアクセスする瞬間、コンソールで次のように表示されます。[info] GET /css/assets/timer.png [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /css/assets/timer.png (RocfDev.Router)

私はtimer.pngリソース要求をファイルweb/statc/vendor/css/resolution-slider.cssに追跡しました。ファイル内のCSSコードはbackground:url(assets/timer.pngです)。

timer.pngは実際にweb/static/assetsにあります。フェニックスは、timer.png以外のすべての画像とグラフィックスを提供できるようです。

私の質問は、なぜ誤ったフォルダからtimer.pngを提供しようとしているのですか?

ありがとうございました。

答えて

0

background:url(assets/timer.png) - ここのURLは相対的なものなので、ブラウザは#{path_to_directory_of_source_css_file}/assets/timer.pngのtimer.pngファイルを探すべきだとブラウザは考えています。

background:url(/assets/timer.png)に指定した行を変更すると役立ちます。

関連する問題