8

/「カスタム」URLで参照する方法を探しています。私はローカル ブラウザのようなものを使用しており、/パスは /unix パス (そうです、OS ルート パスです!) を参照していますが、これは私のファイルが配置されている場所とはまったく異なります。

これを html で解決できますが<base>、これが CSS url() でも機能するかどうか、または完全な URL を指定できる同様のものがあるかどうかはわかりません。

この時点で、任意の URL をフルパスに置き換えて書き換えるカスタム関数で SASS を使用する場合でも、任意のソリューションを受け入れることができます。

私が求めていることをより明確にするために、ここに私の問題の例とそれをどのように解決したいかを示します。

/mnt/projects/web/myproject/index.html

...
<base href="/mnt/projects/web/myproject/" />
...

/mnt/projects/web/myproject/style.scss

$base_url: "/path_to_root_folder_dinamically_fetched_on_client_pc/";
body
{
  background-image: url("#{$base_url}mydir/myimage.png");
}

最良の選択肢は明らかにurl(/mydir/myimage.png)動作する場合ですが、ネットを読んで、動作しないことがわかりました。

提案をありがとう。

更新 1:

申し訳ありませんが、答えはどちらも良いですが、文脈がなければ、この質問に答えるのは難しいです. もう少し説明させてください: 私はソフトウェア ( node-webkit ) を使用して、ローカルで「ウェブサイト」(アプリです) を実行しています。これは多かれ少なかれ、いくつかの追加機能を備えたカスタム クロム インスタンスです。

最大の問題は、node-webkit が file:/// プロトコルを使用することです。そのため、ファイル プロトコルのルート パスは実際には OS のルートであり、Windows では C:/、UNIX システムでは / であり、直接の問題ではありません。これはローカル アプリケーションであるためです (ユーザーが何らかの方法でインストールしている必要があります。私は既にこのシステムにアクセスしていました)。

2 つ目の問題は、アプリケーションを 1 つのファイルにパッケージ化すると、ユーザーがそれを実行すると、アプリケーションが一時ディレクトリに解凍されて、/tmp/randomnumber/index のような file:/// プロトコルを介して Web サイトを実際に実行することです。 .html

このため、それを使用/することは有効なオプションではありませんが、私のスタイルシートは十分に広がっているため (これは複雑なアプリであり、layouts/something.css main.css のようなものがあります)、常に書き換える必要があるのは大きな問題です。 ../ すべての URL に対して。

どのようなオプションがありますか? この場合、javascript オプションは、思ったほど悪くはありません。もう1つのアイデアは、静的なもののみを提供する必要がある非常に小さな webserver を実行することでしたが、これは移植可能でクロスプラットフォームである必要があり、インストールする必要はありません。

基本的な html と CSS でこれを解決できると思っていましたが、そうではないようです。javascript を介して "base" タグを動的に追加することはできますが、CSS には同様のものはありません。

4

3 に答える 3

0

CSS をベース パスに配置するだけです。

この構造では、次のパスを使用する必要があります。background-image: url(images/img1.png);

/index.html (loads styles.css)
/styles.css
/images/img1.png

この構造では、パスを省略できます。background-image: url(img1.png);

/index.html (loads images/styles.css)
/images/styles.css
/images/img1.png

より多くのパスを使用する場合は、CSS を分割して、すべての部分を必要なパスに配置できます。UNIX ルートからの参照は、深刻なセキュリティ上の問題です。

<link src="/etc/passwd"/>

必要なフォルダーへのシンボリックリンクを作成できます。

于 2013-06-30T18:55:34.340 に答える
-3

これはJavaScriptソリューションです

var absolute_path = "/abs_path/"

document.body.style.background = "url(" +  absolute_path + "mydir/myimage.png)"

url()これは、属性を必要とするすべての要素に対して手動で行うことができます。selectors定義済みのリストを調べ、そのバックグラウンド パスを先頭に追加して変更する関数を作成するのはかなり簡単なはずabsolute_pathです。

于 2013-06-30T18:44:03.897 に答える