我动态地添加了带有图像的div。最后,我的完整 div 如下所示:
<div class ="main-wrapper">
<div class = "inner">
img src="data:image/jpeg....>
</div>
<div class = "inner">
img src="data:image/jpeg....>
</div>
<div class = "inner">
img src="data:image/jpeg....>
</div>
<div class = "inner">
img src="data:image/jpeg....>
</div>
</div>
现在,我需要获取图像,即仅 data:image/jpeg...
$("#main-wrapper").on('click', '.inner', function(e) {
var data = e.currentTarget.innerHTML;
});
它也返回所有 HTML。
<img src="data:image/jpeg;base64
如何才能只获取名字?
最佳答案
有attr方法
function blobToDataURL(blob, callback) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = ({
target: {
result
}
}) => resolve(result);
fileReader.readAsDataURL(blob);
})
}
$(function() {
fetch("https://i.picsum.photos/id/842/100/100.jpg")
.then(response => response.blob())
.then(blobToDataURL)
.then(dataUri => {
$('.image').attr("src", dataUri)
})
$(".main-wrapper").on('click', '.image', function(e) {
console.log($(this).attr("src"));
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="inner">
<img class="image" src="">
</div>
</div>
关于javascript - 如何获取按钮点击事件的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62326542/