图像不显示在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

回答

相关问题