时间戳

首页 > 解决方案 > 图像 src 和 css href 链接在 Web 预览器中不起作用

css - 图像 src 和 css href 链接在 Web 预览器中不起作用

问题描述

我刚开始学习 HTML，所以我正在使用教程来做基础知识。我使用 Visual Studio Code 19 完成了所有操作，最终得到以下文件结构和 html： Projects 2 Portfolio> Blog <> index.html html 如下 -

<html> 
    <head>
       <meta charset="utf 8">
        <link rel="stylesheet" href="../main.css">
        <title>Web Blog</title>
    </head>
    <body>

        <h1 class="title">First Entry</h1>
        <p>May 22, 2020</p>
            <h2>Welcome</h2>
            <p class="highlight">This is text</p>
        <img src="../image.jpg" alt="Image without pic">
    </body>  
</html>

如果我启动 Web 预览器，即使 VS Code 指向主目录 Portfolio 中的以下图像文件和 css 文件，图像文件和 css 文件也不会使用。博客下面的文件结构是： Portfolio>image.jpg index.html 和 css.html index.html 是首页，使用相同的css文件和图片文件。预览时它可以正常工作。

<!DOCTYPE html>
<html> 
    <head>
       <meta charset="utf 8">
        <link rel="stylesheet" href="/main.css">
        <title>Web Portfolio</title>
    </head>
    <body>

        <h1 class="title">Web Portfolio</h1>
            <h2>Welcome</h2>
            <p class="highlight">This is text</p>
        <img src="/image.jpg" alt="image without pic">
    </body>  
</html>

main.css html 如下

"h2 {
    background-color: #607d8b;
    color: #ffffff;
   }
   .title { font-size: 65px;}
.highlight {
           font-size: 16px;
           font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
           background-color: red;  
          }

在 index.html 文件的子目录 blog 中运行 Web 预览器不会显示图像文件或使用 css 样式表 main.css。我已经尝试了从 blog>index.html 文件 /Portfolio/image.jpg、/image.jpg 等引用文件的所有方法。这些选项都不起作用。

但是，如果我添加导航链接

<a href="/">Home</a>
<a href="/blog">Blog</a>

到两个 index.html 文件并从主页运行 Web 预览器，主页和博客页面都按预期工作。如果我在目录 blog 中的 index.html 文件上运行网络预览器，则不会使用图像或 css 文件。

所以这种方式太长的问题是为什么blog目录下的index.html文件在预览时没有连接到图片和css文件。示例代码是从教程中复制的，并按照说明进行操作。当您通过控制单击将鼠标悬停在 ../image 上时，甚至 VS Code 也会找到文件。这是预览器的问题吗？还是我错过了什么？

标签： cssimagevisual-studio-codehyperlink

解决方案

索引.html

Blog.html 预览

嘿，所以我拿了你的代码并尝试了 Visual Studio Code。图像在 index.html 中已损坏，我更改了：

<img src="/image.jpg" alt="image without pic">

至

<img src="image.jpg" alt="image without pic">

但是博客页面是用CSS格式化的，而且图片在那里，所以我认为这是一个预览问题，你在不同的浏览器上试过吗？我个人使用谷歌浏览器。

推荐阅读