如何在按钮单击事件中获取图像?

时间:2020-06-11 14:19:44

标签: javascript jquery

我动态添加了div和图片。所以最后,我完整的div看起来像这样:

select
  sales,
  product_code
from 
(
 select sales, t_001 as product_code
 from "project_01.sales_001.trans_datamart"
) as d
 where product_code = '001-40040-00'

现在,我需要获取图像,即仅data:image / jpeg ....

var $text = jQuery('#text'),
    $menu = jQuery('.three_dots_messages_menu'),
    baseDistance = 75;

$text.on( 'autosize:resized', function() {
  $menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})

也返回所有HTML。

<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>

如何仅获取名称?

2 个答案:

答案 0 :(得分:1)

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>

答案 1 :(得分:1)

可以从子数组访问 div 中的

img 元素。

可以从图像dom元素中以 .src

访问

src 属性

<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>

<script>
$(".main-wrapper").on('click', '.inner', function(e) {
    console.log(e.currentTarget.children[0].src);
});
</script>
相关问题