技术文摘
JavaScript实现图片存在性判断及不存在时显示默认图片的代码
2025-01-10 20:32:34 小编
在网页开发中，经常会遇到需要判断图片是否存在，并在图片不存在时显示默认图片的需求。JavaScript 作为一种强大的脚本语言，能够很好地实现这一功能。
我们要了解如何判断图片是否存在。在 JavaScript 中，可以利用 Image 对象来实现。Image 对象有一个 src 属性，当为其赋值图片路径后，浏览器会尝试加载该图片。我们可以通过监听图片的加载和错误事件来判断图片是否成功加载。
下面是具体的代码实现：
function checkImageExists(imageUrl, defaultImageUrl) {
const img = new Image();
img.src = imageUrl;
img.onload = function() {
// 图片存在，直接使用该图片
const targetImage = document.getElementById('targetImage');
if (targetImage) {
targetImage.src = imageUrl;
}
};
img.onerror = function() {
// 图片不存在，显示默认图片
const targetImage = document.getElementById('targetImage');
if (targetImage) {
targetImage.src = defaultImageUrl;
}
};
}
在上述代码中，checkImageExists 函数接收两个参数：要检查的图片路径 imageUrl 和默认图片路径 defaultImageUrl。通过创建一个新的 Image 对象，并将 src 设置为 imageUrl，我们监听了图片的 onload 和 onerror 事件。如果图片成功加载，onload 事件会被触发，我们将目标图片元素（假设其 id 为 targetImage）的 src 设置为 imageUrl；如果图片加载失败，onerror 事件会被触发，此时将目标图片元素的 src 设置为 defaultImageUrl。
在 HTML 中，我们可以这样使用这个函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片存在性判断</title>
</head>
<body>
<img id="targetImage" alt="图片">
<script>
const imageUrl = 'your-image-url.jpg';
const defaultImageUrl = 'default-image.jpg';
checkImageExists(imageUrl, defaultImageUrl);
</script>
</body>
</html>
通过上述代码，我们实现了图片存在性的判断以及在图片不存在时显示默认图片的功能。这样可以提升用户体验，避免因图片加载失败而出现的页面显示问题。无论是在展示用户头像、产品图片还是其他类型的图片时，这种方法都非常实用。通过合理运用 JavaScript 的特性，我们能够为网页开发带来更多的灵活性和稳定性。