在网页开发中，对文本框进行校验并在失败时给出清晰的错误提示是提升用户体验的重要环节。使用JavaScript可以轻松实现这一功能，特别是在错误信息中添加图片，能让提示更加直观。

我们需要创建HTML结构。假设有一个简单的登录表单，包含用户名和密码输入框。代码如下：

<form id="loginForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <span id="usernameError"></span>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError"></span>
  <br>
  <input type="submit" value="登录">
</form>

在这段代码中，每个输入框下方都有一个<span>标签，用于显示错误信息。

接下来，编写JavaScript代码实现校验和错误提示。

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const usernameError = document.getElementById('usernameError');
  const passwordError = document.getElementById('passwordError');

  usernameError.innerHTML = '';
  passwordError.innerHTML = '';

  let isValid = true;

  if (username.length < 3) {
    usernameError.innerHTML = '<img src="error_icon.png">用户名长度不能少于3位';
    isValid = false;
  }

  if (password.length < 6) {
    passwordError.innerHTML = '<img src="error_icon.png">密码长度不能少于6位';
    isValid = false;
  }

  if (isValid) {
    // 表单校验通过，执行提交操作
    this.submit();
  }
});

在这段代码中，我们首先阻止表单的默认提交行为。然后获取输入框的值和对应的错误信息<span>元素。每次校验前，先清空之前的错误信息。接着分别对用户名和密码进行校验，如果不满足条件，则在对应的<span>元素中添加包含图片的错误信息，并将isValid设置为false。最后，如果isValid为true，则提交表单。

通过这种方式，利用JavaScript的事件监听和DOM操作，能够实现文本框校验失败后在输入框下方显示带图片的错误信息，为用户提供更友好、直观的反馈，有效提升了表单的交互性和易用性。无论是小型项目还是大型应用，这一技巧都能发挥重要作用。