在HTML中，我们可以使用<img>标签或者JavaScript的createElement方法来传递图片路径，这里我们主要介绍两种方法。
方法一：使用<img>标签
<img>标签是HTML中最常用的标签之一，用于在网页上显示图片，我们可以在<img>标签的src属性中指定图片的路径。
<img src="图片路径" alt="图片描述">
src属性表示图片的路径，alt属性表示当图片无法显示时，会显示的替代文本。
需要注意的是，如果图片路径是一个相对路径，那么它会相对于当前HTML文件的位置进行解析，如果图片路径是一个绝对路径，那么它会从网页的根目录开始解析。
<!-相对路径 --> <img src="images/pic.jpg" alt="示例图片"> <!-绝对路径 --> <img src="/images/pic.jpg" alt="示例图片">
方法二：使用JavaScript的createElement方法
除了使用<img>标签外，我们还可以使用JavaScript的createElement方法动态创建一个<img>元素，并设置其src属性，这样我们可以在运行时动态地设置图片路径。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态设置图片路径</title>
</head>
<body>
<div id="imageContainer"></div>
<script>
// 获取图片容器元素
var imageContainer = document.getElementById("imageContainer");
// 创建一个新的img元素
var img = document.createElement("img");
// 设置图片路径
img.src = "images/pic.jpg";
img.alt = "示例图片";
// 将新创建的img元素添加到图片容器中
imageContainer.appendChild(img);
</script>
</body>
</html>
在这个例子中，我们首先获取了图片容器元素，然后创建了一个新的img元素，并设置了其src属性为图片路径，我们将新创建的img元素添加到了图片容器中，这样就可以动态地设置图片路径了。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/316103.html
微信扫一扫 