HTML中插入图片有五种方式：一、相对路径引用同目录或子目录图片；二、绝对路径加file:///前缀用于本地测试；三、URL引入网络图片并建议设宽高；四、Base64编码嵌入小型图片；五、CSS background-image用于装饰性图片。
如果您希望在网页中显示图片，需要将图片文件正确引入HTML文档。以下是将图片文件插入HTML页面的具体操作方式：
一、使用相对路径插入本地图片
当图片文件与HTML文件位于同一目录或子目录中时，可通过相对路径引用该图片。浏览器会根据HTML文件位置查找对应图片路径。
1、将图片文件（如 logo.png）复制到与HTML文件相同的文件夹中。
2、在HTML代码中插入 标签，并设置 src 属性为图片文件名。
立即学习“前端免费学习笔记（深入）”；
3、添加 alt 属性以提供图片的替代文本，例如：
。
二、使用绝对路径插入本地图片
当图片存放在计算机固定位置且HTML文件通过文件协议（file://）打开时，可使用绝对路径指向图片。此方式适用于本地测试，但不适用于部署到服务器。
1、获取图片的完整本地路径，例如 Windows 系统下为 C:/projects/images/photo.jpg。
2、将路径中的反斜杠替换为正斜杠，并在开头添加 file:/// 协议前缀。
3、在 标签中写入该路径：
。
三、通过URL插入网络图片
若图片已托管在公开可访问的网络地址上，可直接使用其完整URL作为图片源。浏览器会在页面加载时从远程服务器拉取该图片。
1、确认图片URL有效且可公开访问，例如 https://example.com/assets/icon.svg。
2、在 标签中设置 src 属性为该URL。
3、建议同时设置 width 和 height 属性以避免布局偏移，例如：
。
四、嵌入Base64编码图片
将小型图片（如图标、装饰图）转换为Base64字符串后直接嵌入HTML中，可减少HTTP请求次数，适合静态资源极简场景。
1、使用在线工具或命令行将图片文件（如 favicon.png）转换为Base64字符串。
2、复制生成的Base64字符串，其通常以 data:image/png;base64, 开头。
3、将其粘贴至 标签的 src 属性中，例如：
。
五、使用CSS背景方式引入图片
当图片用于装饰性目的（如页面背景、按钮纹理）而非语义化内容时，推荐通过CSS的 background-image 属性引入，以保持HTML结构语义清晰。
1、在HTML中创建一个具有明确尺寸和类名的容器元素，例如：
。
2、在标签或外部CSS文件中定义该类，设置 background-image 属性，路径可为相对或绝对，例如：.hero-bg { background-image: url(“images/hero.jpg”); }。
3、添加 background-size 和 background-repeat 等属性控制显示效果，例如：background-size: cover; background-repeat: no-repeat;。
以上就是如何把图片移入html_将图片文件插入HTML页面中【插入】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605006.html
微信扫一扫 
支付宝扫一扫 
