图片不会显示在 VS Code 的 html 扩展中

Question

我有这个代码：

<!DOCTYPE html>
<html>
    <head>
        <h1 title="First Heading">Heading 1</h1>
        <h6 title="Second Heading">Heading 2</h6>
    </head>
    <body>
        <p title="First Paragraph">Paragraph 1</p>
        <p title="Second Paragraph">Paragraph 2</p>
        <a href="https://www.w3schools.com/html/html_basic.asp" >W3schools</a>
        <img src="C:\Users\yorda\OneDrive\Gambar\Aseprite\.jpeg\Canyon.jpeg" alt="Pixel Art" width="320" height="180"
    </body>
</html>

如果我通过文件资源管理器打开 html 文件（双击它并转到 chrome），它将显示图像。

但如果我想通过 VS Code 扩展预览我的 html 文件，图像将不会显示。

为什么会这样？有什么办法解决这个问题？提前致谢。

Answer 1

您必须将图像放在 index.html 文件的同一位置。

然后修改你的img src为

<img src="Canyon.jpeg" />

图片不会显示在 VS Code 的 html 扩展中

Image won't show up in html extension in VS Code

html

visual-studio-code

vscode-extensions