图像标签在 vs 代码实时服务器中使用时不会加载图像，相同的代码在没有 vscode 的情况下也能工作

问题描述

这是我的 html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Yash Gas</title>
</head>
<body>
    <img src="../../../Downloads/yashgas.jpg" alt="Yash Gas JPG" width="auto">
</body>
</html>

当我使用 vs 代码运行上面的代码时，它给出了以下输出

不使用 vs 代码的输出

解决方法

如果这对您有帮助，请订阅频道！ [克里希那根尼] 1您只需右键单击要查看的 HTML 文件，右键单击，然后选择“使用 Live Server 打开”：

第 2 步 - 重启 VSCode 有时你能做的最好的事情就是从头开始 VSCode。

首先，保存您的所有工作。然后关闭 VSCode，这也将停止您已安装的所有扩展。

然后，重新打开 VSCode 并重试 - 转到您要查看的 HTML 文件，右键单击，然后选择“使用 Live Server 打开”。第 3 步-) 为 Live Server 设置浏览器扩展程序可能正在运行，但您的系统没有默认浏览器。

即使您确实为系统设置了默认浏览器，让 Live Server 明确知道您想使用哪个浏览器也无妨。

首先，使用 F1 打开命令面板，然后输入首选项：打开设置 (JSON) 并选择该选项。

这将打开您的 VSCode settings.json 文件。

一直滚动到文件底部并粘贴“liveServer.settings.CustomBrowser”：“chrome”。

一直滚动到文件底部，在最后一个设置后添加一个逗号，然后粘贴“liveServer.settings.CustomBrowser”：“chrome”：

html liveserver visual-studio