切换密码可见性并同步更新眼睛图标
" />
本文详解 javascript 中因 `img.src` 返回绝对路径导致图片切换失效的问题，提供使用 `getattribute('src')` 获取原始相对路径的正确方案，并附带健壮性优化与完整可运行示例。
在 Web 表单中，实现“密码可见/隐藏”功能时，常需同步切换输入框类型（type="password" ↔ type="text"）和眼睛图标（如 eye.png ↔ eyec.png）。但初学者常遇到图标不切换的问题——表面看逻辑正确，实则源于对 DOM 属性 src 的误解。
<img> 元素的 .src 属性返回的是浏览器解析后的完整绝对 URL（例如 file:///C:/project/eye.png 或 https://example.com/eye.png），而非 HTML 中写的相对路径 eye.png。因此，直接用 == "eye.png" 比较必然失败。
✅ 正确做法是使用 element.getAttribute('src')，它精准返回 HTML 标签中声明的原始字符串值：
function fun1() {
const eyeImg = document.getElementById("eye");
const currentSrc = eyeImg.getAttribute("src");
if (currentSrc === "eyec.png") {
eyeImg.src = "eye.png";
} else if (currentSrc === "eye.png") {
eyeImg.src = "eyec.png";
}
}⚠️ 更进一步，建议增强代码鲁棒性：
- 使用严格相等 === 替代 ==；
- 添加默认 fallback，避免因初始路径异常导致逻辑中断；
- 合并两个函数逻辑，提升可维护性。
优化后的完整函数如下：
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const eyeImg = document.getElementById("eye");
// 切换输入框类型
if (passwordInput.type === "password") {
passwordInput.type = "text";
eyeImg.src = "eyec.png"; // 显示明文时显示“睁眼”图标
} else {
passwordInput.type = "password";
eyeImg.src = "eye.png"; // 隐藏时显示“闭眼”图标
}
}对应 HTML 中只需绑定一次事件：
<label class="label" for="password">
Password:<br>
<input type="password" id="password" class="password" placeholder="input password..." name="password"/>
<div onclick="togglePasswordVisibility()" class="eye-btn">
<img src="eye.png" id="eye" alt="toggle password visibility">
</div>
</label>? 注意事项：
- 确保 eye.png 和 eyec.png 文件存在于与 HTML 同级目录，或按实际路径调整；
- 若使用构建工具（如 Webpack/Vite），静态资源路径可能需通过 public/ 或 assets/ 引用，此时应统一使用 import 或环境变量处理；
- 推荐为眼睛图标添加 cursor: pointer CSS 样式，提升用户可感知性；
- 生产环境中建议增加 aria-label 和 role="button"，保障无障碍访问。
该方案简洁、可靠，彻底规避了路径解析差异带来的陷阱，是前端表单交互中的典型最佳实践。
