图片不显示在 html 中答案

【问题标题】：Images not showing up in html图片不显示在 html 中
【发布时间】：2017-09-07 12:24:57
【问题描述】：

在网页设计方面，我完全是个菜鸟。我刚开始学习一些基础知识。目前，我正在尝试使图像成为我网页的标题。我访问过很多教程，如果您在网页目录中有专门用于图像的文件，每个教程都说使用代码<img src="images/wood.jpg" height="168" width="100">，并使用高度和宽度说明符使其适合横幅的范围。话虽如此，我刷新页面并没有显示图像。还可以获得有关如何使文字叠加在图像顶部的信息的奖励积分。

                <!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 ABC123@yahoo.com</p>
                </aside>

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

            </body>



            </html>

【问题讨论】：

这将依赖一个直接调用的“images”与这个HTML文件在同一目录下，然后在“images”中，一个名为“wood.jpg”的文件。这也是区分大小写的。您在浏览器控制台中是否有任何错误？这应该会告诉您是否为图像引用了错误的路径或文件名。

标签： html css image webpage

【解决方案1】：

如果您希望横幅图像作为其他元素的背景，而不是使用 img 标签，您可以尝试使用 background-image 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。

【讨论】：

【解决方案2】：

对于按钮或带有覆盖的东西，您可以在 CSS 中使用背景图像，如前所述。否则，您将需要一个带有属性position: relative 的包装器，其中包含图像和另一个具有以下内容的 div 作为覆盖层：

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">

等等

P.S 为了更好的语义，总是对图像使用 alt 属性。

【讨论】：

【解决方案3】：

在您的网络服务器上，public_html 应如下所示：

index.html
图片

上面的图片文件夹中应该有文件“wood.jpg”。

在您的本地 PC 上，右键单击 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

【讨论】：