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获取图像。
云+社区技术沙龙[第21期]
腾讯云存储知识小课堂
企业创新在线学堂
云+社区技术沙龙[第27期]
云+社区技术沙龙[第28期]
“中小企业”在线学堂
云+社区技术沙龙[第6期]
小程序云开发官方直播课(应用开发实战)
T-Day
小程序·云开发官方直播课(数据库方向)