ライブプレビューでコードエディタが表示されない

問題は、HTMLファイルのライブプレビューでコードエディタにCSSの背景が表示されない（ブラケット、Visual Studioコード、Netbeansでテスト済み）イメージパスがhtmlファイルのディレクトリにはありません。それは上位のディレクトリを読み取ることができず、すべてのコードエディタは同じバグを持つことができません。問題のスクリーンショットとコードスニペットを添付しています。私はLinux Ubuntu 16.04を使用していますが、私はBleachbitでシステムをクリーニングした後にのみこの問題に直面しています。ライブサーバーのものに何か問題があります。以前は大丈夫でした。 2日前に、ディレクトリ全体がホームフォルダにない場合、背景を表示できませんでした。今はどこにも表示されません。ここで何が問題になるでしょうか？ありがとうございます。ライブプレビューでコードエディタが表示されない

tree ~/Desktop/Example 
    /home/myhome/Desktop/Example 
    ├── Images 
    │   └── 1.png 
    └── pages 
     ├── index.htm 
     └── testing.css

screenshot of the problem

body { 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
    padding: 1em 2em; 
 
    font: 100% 'Courier New', monospace; 
 
    vertical-align: baseline; 
 
} 
 

 
.filler { 
 
    background: url('../Images/1.png') repeat; 
 
    max-width: 70%; 
 
    min-height: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.text-wrapper { 
 
    max-width: 70%; 
 
    text-align: center; 
 
    padding: 1em 1.5em; 
 
    margin: 0 auto; 
 
} 
 

 
h2 { 
 
    text-transform: capitalize; 
 
    font: bold 2em 'Open Sans', sans-serif; 
 
    color: lightgoldenrodyellow; 
 
} 
 

 
.para-70 { 
 
    text-align: justify; 
 
    color: lightgoldenrodyellow; 
 
} 
 

 
.para-70v1::first-letter { 
 
    font-size: 1.5em; 
 
} 
 

 
.material-icons { 
 
    font-family: 'Material Icons'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: 3em; 
 
    color: whitesmoke; 
 
    line-height: 10px; 
 
    white-space: nowrap; 
 
}

<!DOCTYPE HTML> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Testing page</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="testing.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="filler"> 
 
    <div class="text-wrapper"> 
 
     <h2>A heading</h2> 
 
     <i class="material-icons">code</i> 
 
     <p class="para-70 para-70v1"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non odio venenatis, sodales dolor eu, mollis erat. Donec in facilisis quam. Donec ipsum dolor, tempus vel arcu molestie, placerat porttitor eros. Aliquam euismod facilisis nisi, eget viverra 
 
     velit. Aenean semper pulvinar feugiat. Mauris ornare neque quis eros mollis porta. Mauris tempor eu arcu ullamcorper ullamcorper 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-09 SMalakar

解決策が見つかりました。私もMicrosoftのVisual Code Editorでテストし、同じ問題に直面しました。同じことがAtomでもあると思います。

とにかく、解決策は - です。を教えて localhostにディレクトリを教えてください。どのように動作するのか分かりませんが、動作します。奇妙な。

まず、ファイルをフォルダから外して、ファイルとImagesフォルダが同じ親ディレクトリにあるようにします。

tree ~/Desktop/Example 
    /home/myhome/Desktop/Example 
    ├── Images 
    │ └── 1.png 
    ├── testing.htm 
    └── testing.css 
    └── pages

代わりに、

tree ~/Desktop/Example 
    /home/myhome/Desktop/Example 
    ├── Images 
    │ └── 1.png 
    └── pages 
     ├── testing.htm 
     └── testing.css

して実行。

localhostのは親ディレクトリにある他に何のマップを取得したら、今はどこでもその親ディレクトリにあるHTMLとCSSファイルを移動することができますし、画像をレンダリングすることができます。

多分、それはキャッシュメモリのものか、ブリーチビットが中断したものです。

出典

2017-07-10 21:21:41 SMalakar

これを試してみてください：

background: url(../Images/1.png)

の代わりにbackground: url('../Images/1.png').

また、プロジェクトの構造については、this postを参照してください。希望がそれを助ける:)

出典

2017-07-10 00:53:23 Chip

試着していない。どんなものであれ、上位のディレクトリを読み取ることはできません。同じディレクトリに置かれている場合のみ。 – SMalakar

ライブプレビューでコードエディタが表示されない

答えて

関連する問題