javascript - 如何从图像源字符串中获取源的一部分？

Question

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

在 HTML 页面上有一个图像，其来源是数据库中的图像路径。我试图将此图像路径从图像 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");获取数据

如果不能使用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>