分享程序员开发的那些事...
更新时间：2022-05-14 03:50:14
1. 前言
图像标签是<img>，作用是在网页上显示图片。
2. 显示一张图片
图片没法用文字描述，很难把图片放到img标签的内容部分。
但是图片一般是一个文件，我们可以通过源属性，将图片显示到img标签中。
首先将图片文件1.jpg和我们的网页hello.html放到一个文件下，然后编写代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图像实例</title>
<meta charset="utf-8">
</head>
<body>
<p>
显示一个图片
<img src="1.jpg">
</p>
</body>
</html>
当浏览器在处理到img标签时，发现该标签src属性的值为1.jpg，所以该标签就会加载该图片文件。
所以效果如下：
3. 图片的可替换文本
有时候图片不小心丢失了，当然一般情况下是不会发生的，但是如果发生了，则图片无法正常显示，效果如下：
这样看起来就不是很友好了，此时我们可以给图片添加一个可替换文本，当图片不能正常显示时，可以显示一段文本内容替换。
<p>
显示一个图片
<img src="1.jpg" alt="java图片">
</p>
其实效果也不是很好，所以还是尽量要保证图片是正确的、存在的。
4. 将图片放入文件夹
如果图片比较多，那么图片都跟网页混在一起，会很杂乱。
我们可以建立一个images文件夹下，将1.jpg放入其中，此时hello.html与imags处于同一目录。所以代码更改为：
<p>
显示一个图片
<img src="./images/1.jpg">
</p>
解释下，./表示当前目录，然后./images/表示当前目录的images文件夹下，最后./images/1.jpg就表示跟当前网页同目录的images文件夹下的1.jpg文件。
另外，当访问当前目录的时候，可以省略./，所以上述写法等同于：
<img src="images/1.jpg">
1
5. 小结与拓展
本篇讲述了如何在网页上显示图像，以及如何加载文件夹下的图像。
其实还可以加载当前文件上层目录下的图片，使用的语法为../，..就表示当前文件所在目录的上级目录。
这个比较复杂，暂时不需要大家掌握，感兴趣的同学可以自行去尝试。