JavaScript是一种广泛应用于网页开发中的编程语言。在网页中，我们经常需要引用图片来增强视觉效果。本文将介绍如何使用JavaScript来引用图片，并提供相关实例代码。 在JavaScript中，我们可以使用Image对象来引用图片。它提供了多种方法来控制图片的属性、大小以及位置等。比如，我们可以使用src属性来设置图片的路径，如下所示：

var img = new Image();
img.src = "image.jpg";
document.body.appendChild(img);

上述代码首先创建了一个新的Image对象，并在src属性中指定了图片的路径。最后，我们将图片添加到文档中。 值得注意的是，为了确保图片已经加载完毕后再将其添加到文档中，我们可以检查Image对象的complete属性，代码如下：

var img = new Image();
img.onload = function() {
document.body.appendChild(img);
}
img.src = "image.jpg";

此代码中，我们使用了onload事件，回调函数将在图片加载完成后执行。这样可以保证图片已经准备好了再将其添加到文档中。 除了设置图片路径以外，我们还可以设置图片的宽度、高度等属性。代码如下：

var img = new Image();
img.src = "image.jpg";
img.width = 100;
img.height = 100;
document.body.appendChild(img);

这个代码片段指定了图片的宽度和高度，然后将其添加到文档中。 另外，在使用JavaScript引用图片时，我们可能会遇到路径错误的问题。有时候，我们设置了正确的路径，但图片仍然无法显示。这时候，需要检查图片的路径是否正确，是否存在拼写错误等问题。 如果路径正确无误，而图片仍然无法显示，可能是因为浏览器对外部文件的访问权限受到了限制，可以使用相对路径来解决这个问题。 例如，在将网站从本地开发环境移植到服务器上时，我们需要更改图片路径。我们可以通过使用相对路径来实现，如下所示：

var img = new Image();
img.src = "/images/image.jpg";
document.body.appendChild(img);

上述代码中，我们使用了相对路径"/images/image.jpg"，表示图片位于当前网站的根目录下的images文件夹中。这样，在将网站从本地环境部署到服务器上时，也不需要额外调整图片路径。 总结起来，通过JavaScript引用图片是网页开发中的常用操作。我们可以使用Image对象来设置图片路径、大小以及位置等属性，还可以使用相对路径来避免部署时路径错误的问题。希望本文能够对你在网页开发中使用JavaScript引用图片有所帮助。