在vscode的html文件中写入图片标签显示“二进制文件”无法打开解决办法（自记录）

本文介绍: 在vscode的html 文件中写入图片标签显示“二进制文件”无法打开解决办法（自记录）

学习 html 过程中练习创建包含图文的新闻类网页，发现图片标签无效（新闻文字内容来源网络，侵删）

自己检查网页代码许久没有发现问题，在浏览器也没有找到与我相似的问题，将项目完整发给老师后，老师发现换张图片就可以正常实现功能，后发现我修改过图片格式（原图片来源于网络，下载下来后是.bmp的后缀，为方便使用我修改后缀为.jg p，但在该代码中无法正常使用）。

后来我换了原后缀名为.png的图片发现代码确实能够正常实现功能，老师也告诉我不要随便改后缀名。

（之前改的可以正常使用，我对此表示有些疑惑，老师也只是跟我讲了这句话，没有问出原由，请问有大佬可以告知吗？）

修改后代码

&lt;!Doctype html&gt;
&lt;html&gt;
 
<head&gt;
    <meta charset=" utf-8"&gt;
    <title&gt;标题</title&gt;
    <style&gt;
        #header {
            background-color: white;
            padding: -100px;
        }
 
        #nav {
            background-color: white;
            height: 300px;
            width: 400px;
            float: left;
        }
 
        #nav2 {
            width: 310px;
            height: 300px;
            float: left;
        }
 
        #mav {
            width: 300px;
            height: 400px;
            float: left;
        }
    </style&gt;
</head&gt;
 
<body>
    <div>
        <div id="header">
            <h2 style="color: rgb(87, 87, 194);font-size:30px;">北京新闻
                <sub>
                    <font size="5" color="#cecece">LOCAL NEWS</font>
                </sub>
            </h2>
        </div>
    </div>
    <div>
        <div id="nav">
            <ul>
                <li><b>疫情之后的首场重大国际活动为什么是它?</b></li>
                <li>“太热太重了”，开学“第一课”小朋友体验消防员...</li>
                <li>北京植物园3.2公顷海棠结果，公园提醒：可观可...</li>
                <li>顺义这小区楼门上，竟盘踞着马蜂窝！</li>
                <li>北京服务业扩大开放升级4.0版，有哪些冲突？商...</li>
                <li>街头没车押金不退！但是，小黄车却仍在押金扣费......</li>
                <li>“丹宸永固——紫禁城简称六百年"展亮相故宫博物院</li>
                <li>北京将建设全区首个高级别自动驾驶示范区</li>
            </ul>
        </div>
        <div>
            <div id="nav2">
                <h3>新闻图片</h3>
                <img src="pic.png" width="300" height="200">
                <p><button><a href="Untitled-1.html">建筑历史学者刘妍：木拱廊桥频繁重建，其原因基本是火毁或水毁</a></button></p>
            </div>
            <div id="mav">
                <h3>新闻资讯</h3>
                <ul>
                     <li>北京婴幼儿健康素养核心知识“八知八会”</li>
                    <li>北京升级版电子眼10天抓拍开车看手机和不</li>
                    <li>延庆九眼楼 万里长城中最大空心敌台盛装</li>
                    <li>密云区荣获北京市青少年鑫桥杯“中华魂”主题教</li>
                    <li>2022年冬奥会北京赛区10个场馆年内完工 年...</li>
                    <li>北京旅游必去的三大景点</li>
                    <li>丰台小v蜂再添新成员</li>
                </ul>
            </div>
        </div>
    </div>
</body>
 
</html>