js如何在html显示图片

在HTML中显示图片，我们通常使用<img>标签。<img>标签是HTML的一个空标签，它必须使用src属性来指定图像的源文件，可以是相对路径或绝对路径，还可以使用其他属性来控制图片的显示方式，如宽度、高度、边框等。

以下是一些基本的使用方法：

1、基本用法：在HTML中使用<img>标签插入图片，如下所示：

<img src="yourimagesource" alt="图片描述">

src属性是必须的，用于指定图片的URL或者相对路径，alt属性是可选的，用于为图片提供替代文本，当图片无法加载时，会显示这个替代文本。

2、设置图片宽度和高度：可以使用width和height属性来设置图片的宽度和高度，单位可以是像素（px）、百分比（%）或者视窗单位（vw, vh等）。

<img src="yourimagesource" width="200" height="100" alt="图片描述">

3、添加边框：可以使用border属性来为图片添加边框，单位也是像素（px）。

<img src="yourimagesource" width="200" height="100" border="5" alt="图片描述">

4、对齐方式：可以使用align属性来设置图片的对齐方式，包括左对齐（left）、右对齐（right）、顶部对齐（top）和底部对齐（bottom）。

<img src="yourimagesource" align="left" alt="图片描述">

5、图片链接：可以使用usemap属性来创建一个图像映射，将一个区域与另一个页面上的链接关联起来。

<img src="yourimagesource" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,82,126" href="link1.htm" alt="链接描述">
  <area shape="circle" coords="90,58,3" href="link2.htm" alt="链接描述">
</map>

以上就是在HTML中显示图片的基本方法，需要注意的是，如果图片无法加载，浏览器会显示由alt属性指定的替代文本，为了提高用户体验，建议总是为每个<img>标签提供一个有意义的alt属性。

为了优化网页加载速度，建议对图片进行适当的优化，如压缩图片大小、选择合适的格式等，有许多在线工具可以帮助你优化图片，如TinyPNG、CompressJPEG等。

在实际开发中，我们还可能需要使用JavaScript来动态地改变图片的源文件或者样式，这时，可以使用DOM操作来实现，以下是一个使用JavaScript动态改变图片的例子：

<script>
window.onload = function() {
  var img = document.getElementById('myImage');
  img.src = 'newimagesource.jpg'; // 改变图片的源文件
  img.style.width = '300px'; // 改变图片的宽度
  img.style.height = '200px'; // 改变图片的高度
}
</script>
<img id="myImage" src="oldimagesource.jpg" alt="图片描述">

在这个例子中，我们首先获取了id为’myImage’的图片元素，然后改变了它的src属性和样式，这样，当页面加载完成后，就会显示新的图片和样式。