web-dev-qa-db-ja.com

サブフォルダーからルートフォルダーの画像を選択する

以下は私のウェブサイトのディレクトリ構造だとしましょう： DIR STRUCTURE

index.htmlでは、次のような画像を簡単に参照できます。

<img src="./images/logo.png">

しかし、sub.htmlから同じ画像を参照したいです。 srcはどうあるべきですか？

htmlreferencedirectorysrcsubdirectory
58
Moon
<img src="../images/logo.png">
          __ ______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go one level up
78
aularon

../images/logo.pngは、1つのフォルダーに戻ります。

../../images/logo.pngは2つのフォルダーに戻ります。

/images/logo.pngは、どこにいてもルートフォルダに戻ります/。

90
Moses

相対参照は

<img src="../images/logo.png">

サーバーのルートに対する相対的な場所がわかっている場合、複雑なネストされたディレクトリ階層を持つアプリの最も簡単なアプローチかもしれません-それはすべてのフォルダで同じです。

たとえば、質問に示されているディレクトリツリーがサーバーのルートに対して相対的である場合、index.htmlとsub_folder/sub.htmlは両方とも以下を使用します。

<img src="/images/logo.png">

画像フォルダーがサーバールートの下のfoo（例：http://www.example.com/foo）のようなアプリケーションのルートにある場合、index.html（http://www.example.com/foo/index.html）例およびsub_folder/sub.html（ http://www.example.com/foo/sub_folder/sub.html）両方を使用：

<img src="/foo/images/logo.png">
11
Bert F

Index.htmlはsrc="images/logo.png"を実行でき、sub.htmlからはsrc="../images/logo.png"を実行できます

3
Robusto

../は、ディレクトリツリーの1つ上のフォルダに移動します。次に、適切なフォルダーとその内容を選択します。

../images/logo.png
1
Bopsi

ファイルをサーバーにアップロードするときは注意してください、いくつかのトームは画像がウェブページに表示されず、クラッシュしたアイコンが表示されます。このファイル構造のようになります：-> web（メインフォルダー）-> images（サブフォルダー）-> logo.png（サブフォルダー内のイメージ）上記のコードは、この標準に従います

 <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

フォルダーwebを作成せずにファイル構造を無視してWebサーバーにファイルをアップロードした場合、ファイルを直接アップロードすると画像が破損するため、画像は表示されません。次に、次のようにコードを変更します。

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

ありがとう-> vamshi krishnan

0
vamsikrish

ファイルをサーバーにアップロードするときは注意してください、いくつかのトームは画像がウェブページに表示されず、クラッシュしたアイコンが表示されます。このファイル構造のようになります：-> web（メインフォルダー）-> images（サブフォルダー）-> logo.png（サブフォルダー内のイメージ）上記のコードは、この標準に従います

<img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

フォルダーwebを作成せずにファイル構造を無視してWebサーバーにファイルをアップロードした場合、ファイルを直接アップロードすると画像が破損するため、画像は表示されません。次に、次のようにコードを変更します。

<img src="images/logo.jpg" alt="image1" width="50px" height="50px">

ありがとう-> vamshi krishnan

0
vamsi krishnan mysore