jQuery Ajax是一种使用JavaScript库jQuery进行异步HTTP请求的技术,可以用于从服务器获取数据而无需刷新整个页面。获取图像是Ajax的常见应用场景之一。
$.ajax({
url: 'path/to/your/image.jpg',
method: 'GET',
xhrFields: {
responseType: 'blob' // 重要:指定响应类型为二进制数据
},
success: function(data) {
// 创建对象URL
var imageUrl = URL.createObjectURL(data);
// 创建img元素并设置src
var img = $('<img />').attr('src', imageUrl);
// 添加到页面
$('#image-container').append(img);
},
error: function(xhr, status, error) {
console.error('Error loading image:', error);
}
});
$.ajax({
url: 'path/to/your/image.jpg',
method: 'GET',
beforeSend: function(xhr) {
xhr.overrideMimeType('text/plain; charset=x-user-defined');
},
success: function(data) {
// 将数据转换为Base64
var base64 = 'data:image/jpeg;base64,' + btoa(data);
// 创建img元素并设置src
var img = $('<img />').attr('src', base64);
// 添加到页面
$('#image-container').append(img);
},
error: function(xhr, status, error) {
console.error('Error loading image:', error);
}
});
Access-Control-Allow-Origin
)才能成功获取。URL.createObjectURL()
创建的对象URL在不再需要时应调用URL.revokeObjectURL()
释放内存。对于简单的图像加载,通常更简单的方法是直接设置img元素的src属性:
$('#my-image').attr('src', 'path/to/image.jpg');
只有在需要处理图像数据(如预处理、验证等)时才需要使用Ajax获取图像。
没有搜到相关的文章