圖像不顯示在html

當談到網頁設計時，我是一個完整的noob。我剛開始學習一些基礎知識。此刻，我正試圖讓圖像成爲我網頁的首要旗幟。我訪問了很多教程，並且每個教程都說如果在網頁的目錄中有一個專門用於圖像的文件並使用高度和寬度說明符來使其適合橫幅範圍，則使用代碼<img src="images/wood.jpg" height="168" width="100">。有人說，我刷新頁面，並沒有圖像顯示。此外，還提供了關於如何在圖像的頂部重疊單詞的信息的獎勵點。圖像不顯示在html

   <!DOCTYPE HTML> 
      <!--- COMMENT---> 


      <html long="en"> 


      <head> 

      <meta charset="UTF -8"/> 
      <Title>Ken's Woodworking Emporium</title> 
      <link rel="stylesheet" type="text/css" href="style.css"> 
      <!--[if lt IE 9]> 
      <script> 
       document.createElement("article"); 
       document.createElement("aside"); 
       document.createElement("footer"); 
       document.createElement("header"); 
       document.createElement("main"); 
       document.createElement("nav"); 
       document.createElement("section"); 
       </script> 
       <![endif]--> 

      <meta name="description" contents= "Learn everything you want to know 
      about wood working."/> 

      <meta name="keyword" content=html5 canvas,html5,toutorial,html5 doctype, 
      video, learn/> 

      <meta name="robots" Content="index, follow"/> 

      <base href="http://localhost/html/"/> 

      <link rel= stylesheet" href="styles.css"/> 


      </head> 

      <body> 
       <header class="banner"> 
        <h1>Woodworking</h1> 
        <img src="images/wood.jpg"> 
        <p> Local woodworkers</p> 
       </header> 

       <nav> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="archive.html">Archive</a></li> 
         <li><a href="about.html">About</a></li> 
        </ul> 
       </nav> 

       <main> 
        <section> 
         <h2>Carpenty</h2> 
         <article> 
          <header> 
           <h3>Details on carpentry</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
         <article> 
          <header> 
           <h3>Custom carpentry.</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
        <h2>Restoration</h2> 
         <article> 
          <header> 
           <h3>Old to new</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
         <article> 
          <header> 
           <h3>refinishing.</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 
       </main> 

       <aside> 
        <h2>Have a request?</h2> 
        <p>If you have a custom order request feel free to contact us at 918-555-5555, or [email protected]</p> 
       </aside> 

       <footer> 
        <p>Footer information</p> 
       </footer> 

      </body> 



      </html>

來源

2017-04-11 scubasteve7

這將依賴於直接稱爲「圖像」是在同一目錄下這個HTML文件，然後在「圖像」，一個名爲「wood.jpg」文件。這也都是區分大小寫的。瀏覽器控制檯中是否有任何錯誤？這應該告訴你是否引用了圖像的錯誤路徑或文件名。 –

-1

而不是使用img標籤，如果你想的旗幟形象一些其他元素的背景，你可以嘗試的背景圖像的CSS屬性。對樣式表一無所知，我儘可能簡單明瞭。

我給你做一個小例子@https://jsfiddle.net/wck2hyxt/1/

HTML：

 <body> 
      <header class="banner"> 
       <h1>Woodworking</h1> 
       <p> Local woodworkers</p> 
      </header> 
     </body>

CSS：

header.banner { 
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg"); 
    background-size: cover; 
    height: 168px; 
    width: 100%; 
    padding: 10px; 
}

注意：我使用的外部形象的一面旗幟。您可以將該網址更改爲「/ path/to/image」。此外，我相信你的意圖是使寬度100％，而不僅僅是100.

來源

2017-04-11 22:53:35 suBDavis

對於按鈕或重疊的東西，你可以使用背景圖像在CSS提到的。 overwise你需要使用屬性position: relative的包裝包含圖像，並與下面的覆蓋層的另一格：

position: absolute; 
z-index: 2; // you can use higher number if needed

，並相對於容器應用絕對位置與屬性top，right，bottom和/或left，應該是這樣的右上角有10px的填充，即：

在HTML

：

<div class="img-wrap"> 
    <img src="wood.jpg" alt="wood"> 
    <div class="img-overlay">overlay text</div> 
</div>

在CSS：

.img-wrap { 
    position:relative; 
} 
.img-wrap .img-overlay { 
    position: absolute; 
    z-index:2; 
    top: 10px; 
    right: 10px; 
}

如果不顯示它可能圖像，因爲圖像路徑是相對於最後一個文件夾，更好地使用絕對路徑時，或相對於網頁文件夾的根其唯一的內頁。喜歡這個;

<img src="/images/wood.jpg" alt="wood image">

或

<img src="http://www.yourwebsite.com/images/wood.jpg" alt="wood image">

，或者如果您使用WordPress它可能看起來像財產以後這些

<img src="http://www.yourwebsite.com/wp-content/uploads/**/****/images/wood.jpg" alt="wood image"> 
<img src="http://www.yourwebsite.com/wp-content/images/wood.jpg" alt="wood image"> 
<img src="http://www.yourwebsite.com/wp-content/themes/your-theme/images/wood.jpg" alt="wood image">

等

PS更好的語義總是使用alt屬性與一個圖片。

來源

2017-04-12 00:36:25

在你的web服務器的的public_html應該是這樣的：

指數。HTML
圖像上面

的圖像文件夾應該具有其內的文件 'wood.jpg'。

在本地計算機，右鍵單擊該文件wood.jpg並轉到屬性。路徑是大小寫敏感的。如果擴展以.jpg結尾那麼你的代碼應該是這樣的：

<img src="images/wood.jpg" height="168" width="100">

如果擴展以.JPG結尾那麼你的代碼應該是這樣的：

<img src="images/wood.JPG" height="168" width="100">

當爽口，按住Ctrl + F5清除緩存並查看您所做的更改。

如果你需要的話疊加圖像，你需要你的CSS中添加位置的元素。 W3這裏提供了一個很好的教程：https://www.w3schools.com/css/tryit.asp?filename=trycss_zindex

來源

2017-04-12 00:39:37 Xerath

圖像不顯示在html

回答

相關問題