如何把图片移入html_将图片文件插入HTML页面中【插入】

HTML中插入图片有五种方式：一、相对路径引用同目录或子目录图片；二、绝对路径加file:///前缀用于本地测试；三、URL引入网络图片并建议设宽高；四、Base64编码嵌入小型图片；五、CSS background-image用于装饰性图片。

如果您希望在网页中显示图片，需要将图片文件正确引入HTML文档。以下是将图片文件插入HTML页面的具体操作方式：

一、使用相对路径插入本地图片

当图片文件与HTML文件位于同一目录或子目录中时，可通过相对路径引用该图片。浏览器会根据HTML文件位置查找对应图片路径。

1、将图片文件（如 ）复制到与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。

标签： css html go svg windows 计算机 编码 浏览器 工具 html文件 win