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

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

 vscode显示图片为二进制文件,不能打开的问题

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

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

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

修改后代码

<!Doctype html>
<html>
 
<head>
    <meta charset=" utf-8">
    <title>标题</title>
    <style>
        #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>
</head>
 
<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>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值