xhr返回直接赋值给img标签的src报错undefined

当您尝试将通过XMLHttpRequest（简称xhr）获取的响应直接赋值给`<img>`标签的`src`属性时遇到`undefined`错误，这通常是由于响应返回的数据格式或处理方式不正确所导致的。以下是可能出现的问题及解决方案：

1. 确认响应数据格式：`XMLHttpRequest`返回的数据格式可能是`blob`、`arraybuffer`或纯文本（如`text/plain`）。如果服务器返回的是图片数据，通常是二进制格式，并且`Content-Type`响应头可能是`image/jpeg`、`image/png`等。在JavaScript中处理这种二进制数据时，不能直接将其赋值给`src`属性，因为`src`属性期望的是图片的URL。

2. 正确处理二进制响应：如果需要将从`xhr`获取的二进制数据设置为图片的源，您应该先将其转换为Blob对象，然后使用`URL.createObjectURL()`创建一个可以被`src`使用的URL。示例代码如下：

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; // 设置响应类型为blob
xhr.onload = function () {
    if (this.status === 200) {
        var blobUrl = URL.createObjectURL(this.response); // 创建一个blob URL
        document.getElementById('yourImageId').src = blobUrl; // 将创建的URL赋值给img的src属性
    }
};
xhr.open('GET', 'path/to/image', true); // 替换为实际图片路径
xhr.send();

3. 检查错误处理：确保您的`xhr`请求中正确处理了错误情况。如果请求失败，`xhr`的`status`属性将不会是200，您需要相应地处理这种情况，避免执行无效操作。