HTML <img> src 属性

在 web 前端开发中， 标签是用来在网页上显示图片的元素。其中，src 属性用来指定图片的 URL 地址，告诉浏览器从哪里加载图片。在本文中，我将详细介绍 标签的 src 属性以及一些相关的注意事项。

语法

<img src="image.jpg" alt="Description of image">

在上面的示例中，"image.jpg" 是图片的 URL 地址，可以是相对路径或绝对路径。alt 属性用来描述图片的内容，当图片无法加载时，会显示该描述文字。

相对路径 vs 绝对路径

相对路径

相对路径是相对于当前网页的路径。例如，如果图片和网页在同一个文件夹下，可以直接写图片的文件名；如果图片在一个子文件夹下，可以使用相对路径指定子文件夹的名称。

<img src="images/image.jpg" alt="Image">

绝对路径

绝对路径是完整的 URL 地址，包括协议、域名和路径。如果图片位于外部网站或 CDN 上，可以使用绝对路径加载图片。

<img src="https://example.com/image.jpg" alt="Image">

本地图片 vs 远程图片

本地图片

本地图片是指存储在本地文件系统中的图片文件。可以使用相对路径或绝对路径加载本地图片。

<img src="images/image.jpg" alt="Local Image">

远程图片

远程图片是指存储在其他服务器上的图片文件。可以使用绝对路径加载远程图片。

<img src="https://example.com/image.jpg" alt="Remote Image">

图片格式

常见的图片格式包括 JPEG、PNG、GIF 等。根据不同的需求和场景选择合适的图片格式，以提高页面加载速度和显示效果。

<img src="image.jpg" alt="JPEG Image">
<img src="image.png" alt="PNG Image">
<img src="image.gif" alt="GIF Image">

图片大小

在实际开发中，可以通过 CSS 控制图片的大小，包括宽度和高度。也可以通过 HTML 的 width 和 height 属性指定图片的宽高。

<img src="image.jpg" alt="Image" style="width: 100px; height: 100px;">
<img src="image.jpg" alt="Image" width="100" height="100">

总结

通过本文的介绍，你应该对 HTML 标签的 src 属性有了更深入的了解。选择合适的图片路径、格式和大小，可以优化网页性能和用户体验。祝你在前端开发中取得成功！