Question

我想在javascript函数中调用图像的src的一部分。怎么做？

在HTML页面上，此图像的来源是来自数据库的图像路径。我试图将图像image的src提取到我的javascript函数的src。

这是图片：

 <img id="Image4" alt="" style='height: 200px; width:120px' src='<%# ResizeTransform(Eval("image_path").ToString(),120,200) %>' class="thumbnailimg" />

js代码如下：

 <script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnailimg').on('click', function () {
                var img = $('<img />', {
                //src: this.src,
                src: this.src("image_path"),
                'class': 'rs'

            });

            $('.img-container').html(img).show();
         });
      });
    </script>

我如何仅将图像src中的“ image_path”提取到js函数的src中？目前，当我使用：src：this.src（“ image_path”）时，它不显示图像；而当我使用：src：this.src时，图像则模糊。

Answer 1

您可以使用let src = $(this).attr('src');来获取src属性。

更新：问题可能来自ResizeTransform函数。

您应将属性data-original='<%# Eval("image_path").ToString() %>'添加到img标签中，并通过let src = $(this).data("original");获取数据

如果无法使用原始数据，请尝试srcset='<%# Eval("image_path").ToString() %>'并通过let src = $(this).data("srcset");获取数据

//data-original=<%=Eval("image_path").ToString()%>
$(document).ready(function() {
    $('.thumbnailimg').on('click', function () {
        //let src = $(this).attr('src');
        //let src = $(this).data("original");
        let src = $(this).attr("srcset");
        //alert(src);
        var img = $('<img />', {
            //src: this.src,
            src: src,

            'class': 'rs'


        });


        $('.img-container').html(img).show();
});
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="Image4" srcset='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' data-original='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' alt="" style='height: 60px; width:120px' src='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' class="thumbnailimg" />


<div class="img-container"></div>

Answer 2

如果图片是图片，您可以简单地使用attr('src')来获取来源

$(document).ready(function() {
    $('.thumbnailimg').on('click', function () {
         $('.img-container').html('<img src="'+$(this).attr('src')+'"> ') 

        });
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="Image4" alt="" style='height: 60px; width:120px' src='https://homepages.cae.wisc.edu/~ece533/images/airplane.png' class="thumbnailimg" />


<div class="img-container"></div>

Answer 3

为此，只需在渲染时在设计中的图像对象中设置自定义属性，稍后您就可以在jquery中获得该属性：

cust-imgpath='<%# Eval("image_path") %>' // add this in image tag

//in jquery, you will get property on click function 
$("img").attr('cust-imgpath');

js代码如下所示：

<script type="text/javascript">
$(document).ready(function() {
  $('.thumbnailimg').on('click', function() {

    var img = $('<img />', {
      //src: this.src,
      src: this.attr('cust-imgpath'), //here you get the custom attribute value 
      'class': 'rs'
    });
    $('.img-container').html(img).show();
  });
});
</script>

如何从imagesource字符串获取部分来源？

3 个答案: